<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>javascript编程基础 | 永恒的金色年华</title>
  <meta name="description" content="JavaScript编程基础 JavaScript 诞生于1995 年。当时，它的主要目的是处理以前由服务器端语言（如Perl）负责的一些输入验证操作。在JavaScript 问世之前，必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域，是否输入了无效的值。 网景(Netscape) 最先提出的 , 早期用于解决客户端表单输入验证,随着网络发展,已经逐步延伸到互联网各个领域.(网页的各">
<meta property="og:type" content="article">
<meta property="og:title" content="javascript编程基础">
<meta property="og:url" content="https://xulujin.gitee.io/blog/2018/10/22/javascript%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="LuKing">
<meta property="og:description" content="JavaScript编程基础 JavaScript 诞生于1995 年。当时，它的主要目的是处理以前由服务器端语言（如Perl）负责的一些输入验证操作。在JavaScript 问世之前，必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域，是否输入了无效的值。 网景(Netscape) 最先提出的 , 早期用于解决客户端表单输入验证,随着网络发展,已经逐步延伸到互联网各个领域.(网页的各">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2018-10-22T02:40:21.000Z">
<meta property="article:modified_time" content="2020-06-21T13:10:21.270Z">
<meta property="article:author" content="LuKing-Xun">
<meta property="article:tag" content="javascript">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="https://xulujin.gitee.io/blog/2018/10/22/javascript%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80/index.html">
  
    <link rel="alternate" href="/atom.xml" title="LuKing" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/blog/css/style.css">

  
  
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitment@0.0.3/style/default.min.css">
  
  
  
<meta name="generator" content="Hexo 5.2.0"></head>


<body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://github.com/1314xulujin" target="_blank">
          <img class="img-circle img-rotate" src="/blog/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">LuKing-Xun</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">前端工程师</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> Shenzhen, China</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="Search" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="Type something..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav menu-highlight">
        
        
        <li class="menu-item menu-item-home">
          <a href="/blog/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">Home</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">Archives</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/blog/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">Categories</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/blog/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">Tags</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-repository">
          <a href="/blog/repository">
            
            <i class="icon icon-project"></i>
            
            <span class="menu-title">Repository</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-books">
          <a href="/blog/books">
            
            <i class="icon icon-book-fill"></i>
            
            <span class="menu-title">Books</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-links">
          <a href="/blog/links">
            
            <i class="icon icon-friendship"></i>
            
            <span class="menu-title">Links</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-about">
          <a href="/blog/about">
            
            <i class="icon icon-cup-fill"></i>
            
            <span class="menu-title">About</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/1314xulujin" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://mail.qq.com/cgi-bin/loginpage" target="_blank" title="Email" data-toggle=tooltip data-placement=top><i class="icon icon-email"></i></a></li>
        
        <li><a href="/blog/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">Board</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>一如前端深似海,回头?...没头回了!</p>
            </div>
        </div>
    </div>
</div>

    
      

    
      
  <div class="widget">
    <h3 class="widget-title">Tags</h3>
    <div class="widget-body">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/BFC/" rel="tag">BFC</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/BootStrap/" rel="tag">BootStrap</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ES6/" rel="tag">ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/HTML5-css3/" rel="tag">HTML5+css3</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/OOP%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E6%80%9D%E6%83%B3/" rel="tag">OOP面向对象思想</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Storage%E5%AD%98%E5%82%A8/" rel="tag">Storage存储</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Web-Worker/" rel="tag">Web Worker</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ajax/" rel="tag">ajax</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/call%E5%92%8Capply/" rel="tag">call和apply</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css3/" rel="tag">css3</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/git/" rel="tag">git</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/" rel="tag">hexo搭建博客</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/html4/" rel="tag">html4</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jQuery/" rel="tag">jQuery</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/java/" rel="tag">java</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/js/" rel="tag">js</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/photoshop/" rel="tag">photoshop</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/vue/" rel="tag">vue</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webpack/" rel="tag">webpack</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/websocket/" rel="tag">websocket</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/window10/" rel="tag">window10</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%85%B6%E4%BB%96/" rel="tag">其他</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%86%B7%E7%9F%A5%E8%AF%86/" rel="tag">冷知识</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%87%BD%E6%95%B0%E6%9F%AF%E9%87%8C%E5%8C%96/" rel="tag">函数柯里化</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" rel="tag">前端工程化</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/" rel="tag">前端面试题</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8FUI%E6%A1%86%E6%9E%B6/" rel="tag">微信小程序UI框架</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E6%95%99%E7%A8%8B/" rel="tag">教程</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E6%99%BA%E6%89%AC%E4%BF%A1%E8%BE%BE/" rel="tag">智扬信达</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E6%9C%AC%E7%A7%91%E8%80%83%E8%AF%95%E7%A7%91%E7%9B%AE/" rel="tag">本科考试科目</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E8%B7%A8%E5%9F%9F/" rel="tag">跨域</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" rel="tag">软件设计模式</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E8%BD%AF%E5%AE%9E%E5%8A%9B/" rel="tag">软实力</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a><span class="tag-list-count">10</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E9%9D%A2%E8%AF%95%E9%A2%98/" rel="tag">面试题</a><span class="tag-list-count">7</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget-body tagcloud">
      <a href="/blog/tags/BFC/" style="font-size: 13px;">BFC</a> <a href="/blog/tags/BootStrap/" style="font-size: 13px;">BootStrap</a> <a href="/blog/tags/ES6/" style="font-size: 13px;">ES6</a> <a href="/blog/tags/HTML5-css3/" style="font-size: 13px;">HTML5+css3</a> <a href="/blog/tags/OOP%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E6%80%9D%E6%83%B3/" style="font-size: 13px;">OOP面向对象思想</a> <a href="/blog/tags/Storage%E5%AD%98%E5%82%A8/" style="font-size: 13px;">Storage存储</a> <a href="/blog/tags/Web-Worker/" style="font-size: 13px;">Web Worker</a> <a href="/blog/tags/ajax/" style="font-size: 13px;">ajax</a> <a href="/blog/tags/call%E5%92%8Capply/" style="font-size: 13px;">call和apply</a> <a href="/blog/tags/css3/" style="font-size: 13px;">css3</a> <a href="/blog/tags/git/" style="font-size: 13px;">git</a> <a href="/blog/tags/hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/" style="font-size: 13px;">hexo搭建博客</a> <a href="/blog/tags/html4/" style="font-size: 13px;">html4</a> <a href="/blog/tags/jQuery/" style="font-size: 13px;">jQuery</a> <a href="/blog/tags/java/" style="font-size: 13px;">java</a> <a href="/blog/tags/javascript/" style="font-size: 13.14px;">javascript</a> <a href="/blog/tags/js/" style="font-size: 13px;">js</a> <a href="/blog/tags/photoshop/" style="font-size: 13px;">photoshop</a> <a href="/blog/tags/vue/" style="font-size: 13.71px;">vue</a> <a href="/blog/tags/webpack/" style="font-size: 13.14px;">webpack</a> <a href="/blog/tags/websocket/" style="font-size: 13px;">websocket</a> <a href="/blog/tags/window10/" style="font-size: 13px;">window10</a> <a href="/blog/tags/%E5%85%B6%E4%BB%96/" style="font-size: 13px;">其他</a> <a href="/blog/tags/%E5%86%B7%E7%9F%A5%E8%AF%86/" style="font-size: 13.14px;">冷知识</a> <a href="/blog/tags/%E5%87%BD%E6%95%B0%E6%9F%AF%E9%87%8C%E5%8C%96/" style="font-size: 13px;">函数柯里化</a> <a href="/blog/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 13.43px;">前端</a> <a href="/blog/tags/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" style="font-size: 13px;">前端工程化</a> <a href="/blog/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/" style="font-size: 13.86px;">前端面试题</a> <a href="/blog/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8FUI%E6%A1%86%E6%9E%B6/" style="font-size: 13px;">微信小程序UI框架</a> <a href="/blog/tags/%E6%95%99%E7%A8%8B/" style="font-size: 13px;">教程</a> <a href="/blog/tags/%E6%99%BA%E6%89%AC%E4%BF%A1%E8%BE%BE/" style="font-size: 13.29px;">智扬信达</a> <a href="/blog/tags/%E6%9C%AC%E7%A7%91%E8%80%83%E8%AF%95%E7%A7%91%E7%9B%AE/" style="font-size: 13px;">本科考试科目</a> <a href="/blog/tags/%E8%B7%A8%E5%9F%9F/" style="font-size: 13px;">跨域</a> <a href="/blog/tags/%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 13px;">软件设计模式</a> <a href="/blog/tags/%E8%BD%AF%E5%AE%9E%E5%8A%9B/" style="font-size: 13px;">软实力</a> <a href="/blog/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 14px;">面试</a> <a href="/blog/tags/%E9%9D%A2%E8%AF%95%E9%A2%98/" style="font-size: 13.57px;">面试题</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">Archive</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/06/">六月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/05/">五月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/01/">一月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/11/">十一月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/08/">八月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/06/">六月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/05/">五月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/04/">四月 2021</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/02/">二月 2021</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/09/">九月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/08/">八月 2020</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/07/">七月 2020</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/06/">六月 2020</a><span class="archive-list-count">12</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/05/">五月 2020</a><span class="archive-list-count">10</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/04/">四月 2020</a><span class="archive-list-count">8</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">三月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/02/">二月 2020</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/01/">一月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2019/12/">十二月 2019</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2019/11/">十一月 2019</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2019/10/">十月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/12/">十二月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/10/">十月 2018</a><span class="archive-list-count">6</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/blog/2022/06/16/%E5%B0%86node-sass%E6%8D%A2%E6%88%90dart-sass/" class="title">将node-sass换成dart-sass</a>
              </p>
              <p class="item-date">
                <time datetime="2022-06-16T04:55:29.000Z" itemprop="datePublished">2022-06-16</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/blog/2022/05/25/%E8%87%AA%E5%B7%B1%E5%AF%B9%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E5%8F%8A%E4%BA%A4%E4%BB%98%E6%B5%81%E7%A8%8B%E7%90%86%E8%A7%A3/" class="title">自己对软件开发及交付流程理解</a>
              </p>
              <p class="item-date">
                <time datetime="2022-05-25T06:31:29.000Z" itemprop="datePublished">2022-05-25</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/blog/2022/05/16/web%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E5%85%B3%E9%94%AE%E8%AF%8D/" class="title">web前端关键词</a>
              </p>
              <p class="item-date">
                <time datetime="2022-05-16T03:21:19.000Z" itemprop="datePublished">2022-05-16</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/blog/2022/01/19/%E5%AD%97%E8%8A%82%E9%A3%9E%E4%B9%A6%E9%9D%A2%E8%AF%95%E9%A2%98_20220119/" class="title">腾讯互娱面试题</a>
              </p>
              <p class="item-date">
                <time datetime="2022-01-19T02:10:23.000Z" itemprop="datePublished">2022-01-19</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/blog/2021/11/12/js%E5%B0%86%E5%A4%9A%E4%B8%AA%E5%9B%BE%E7%89%87%E6%8B%BC%E5%9C%A8%E4%B8%80%E8%B5%B7%E4%B8%8B%E8%BD%BD%E6%88%90%E4%B8%80%E5%BC%A0%E5%9B%BE%E7%89%87/" class="title">(no title)</a>
              </p>
              <p class="item-date">
                <time datetime="2021-11-12T04:28:18.079Z" itemprop="datePublished">2021-11-12</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-javascript编程基础" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      javascript编程基础
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/blog/2018/10/22/javascript%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80/" class="article-date">
	  <time datetime="2018-10-22T02:40:21.000Z" itemprop="datePublished">2018-10-22</time>
	</a>
</span>
        
        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link-link" href="/blog/tags/javascript/" rel="tag">javascript</a>
  </span>


        

        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/blog/2018/10/22/javascript%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80/#comments" class="article-comment-link">Comments</a></span>
        
      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h1 id="JavaScript编程基础"><a href="#JavaScript编程基础" class="headerlink" title="JavaScript编程基础"></a>JavaScript编程基础</h1><blockquote>
<p>JavaScript 诞生于1995 年。当时，它的主要目的是处理以前由服务器端语言（如Perl）负责的一<br>些输入验证操作。在JavaScript 问世之前，必须把表单数据发送到服务器端才能确定用户是否<br>没有填写某个必填域，是否输入了无效的值。</p>
<p>网景(Netscape) 最先提出的 , 早期用于解决客户端表单输入验证,随着网络发展,已经逐步延伸到互联网各个领域.(网页的各种交互 \ 基于js语言开发的后端 \ 物联网 \ 移动设备…)</p>
</blockquote>
<blockquote>
<p>截止目前: JavaScript 已经成为客户端脚本的标志性语言 ,在JavaScript家族中,目前两大成员:</p>
<p>​    1.浏览器端JavaScript = &gt; window (负责 DOM + BOM 等浏览器的交互)</p>
<p>​    2.服务器端JavaScript = &gt; nodejs ( 负责服务器端程序 定义为一门后台语言,类似java \ php 等 )</p>
</blockquote>
<h6 id="JavaScript组成"><a href="#JavaScript组成" class="headerlink" title="JavaScript组成:"></a>JavaScript组成:</h6><h6 id="浏览器端JavaScript-ECMA标准语法-DOM-BOM"><a href="#浏览器端JavaScript-ECMA标准语法-DOM-BOM" class="headerlink" title="浏览器端JavaScript:   ECMA标准语法   +  DOM  + BOM"></a>浏览器端JavaScript:   ECMA标准语法   +  DOM  + BOM</h6><h6 id="服务器端JavaScript-ECMA标准语法-各种服务端程序所需要的模块-开发服务器-操作数据库-文件系统等"><a href="#服务器端JavaScript-ECMA标准语法-各种服务端程序所需要的模块-开发服务器-操作数据库-文件系统等" class="headerlink" title="服务器端JavaScript:   ECMA标准语法  +  各种服务端程序所需要的模块(开发服务器,操作数据库,文件系统等)"></a>服务器端JavaScript:   ECMA标准语法  +  各种服务端程序所需要的模块(开发服务器,操作数据库,文件系统等)</h6><p>ECMAScript (JavaScript的标准语法 ) : (ES5 /(存在兼容问题:ES6 / ES7 / ES8 / ES9) )</p>
<h3 id="ECMA语法约定"><a href="#ECMA语法约定" class="headerlink" title="ECMA语法约定:"></a>ECMA语法约定:</h3><h5 id="1-变量-：（变量是个筐-啥都往里装-gt-存储数据的一块内存空间）"><a href="#1-变量-：（变量是个筐-啥都往里装-gt-存储数据的一块内存空间）" class="headerlink" title="1. 变量 ：（变量是个筐 ,啥都往里装 =&gt;存储数据的一块内存空间）"></a>1. 变量 ：（变量是个筐 ,啥都往里装 =&gt;存储数据的一块内存空间）</h5><h6 id="1-先声明-后赋值"><a href="#1-先声明-后赋值" class="headerlink" title="1.先声明,后赋值"></a>1.先声明,后赋值</h6><p>使用var关键字来声明变量    var width; width=10;<br>width是变量名称（会对应到计算机的某个地址），10是我想储存的东西</p>
<h6 id="2-同时声明赋值"><a href="#2-同时声明赋值" class="headerlink" title="2.同时声明赋值"></a>2.同时声明赋值</h6><p>var width=10;</p>
<h6 id="3-不声明赋值-不建议使用-在严格模式下-会报错"><a href="#3-不声明赋值-不建议使用-在严格模式下-会报错" class="headerlink" title="3.不声明赋值(不建议使用,在严格模式下 会报错. )"></a>3.不声明赋值(不建议使用,在严格模式下 会报错. )</h6><p>width=10;</p>
<h5 id="2-数据类型"><a href="#2-数据类型" class="headerlink" title="2.数据类型"></a>2.数据类型</h5><h6 id="1-基础类型-值类型"><a href="#1-基础类型-值类型" class="headerlink" title="1.基础类型(值类型)"></a>1.基础类型(值类型)</h6><p>​            a) undefined 表示错误，不明确，未定义的变量</p>
<p>​            b) null 表示是不存在的意思</p>
<blockquote>
<p>null与undefined 到底有什么区别?</p>
<p>如果在使用var声明一个变量但是未对这个变量加以初始化时，便会返回一个值即为undefined。</p>
<p>但是null值只是表示空的对象指针（即null是在很多语言中存在，但是undefined只是在javascript中才有的）</p>
</blockquote>
<p>​        c) boolean 布尔类型 有两个值true和false</p>
<p>​         d) number 数字类型</p>
<p>​        f) string    字符串类型    </p>
<h6 id="2-对象类型-引用类型"><a href="#2-对象类型-引用类型" class="headerlink" title="2.对象类型(引用类型)"></a>2.对象类型(引用类型)</h6><p>​          a)object  (使用typeof 检测时 对象 和 数组 都是 object) 对象类型</p>
<p>​          b)function 函数类型</p>
<blockquote>
<p>检测数据类型有哪几种方式 ??</p>
</blockquote>
<h5 id="3-运算符"><a href="#3-运算符" class="headerlink" title="3.运算符"></a>3.运算符</h5><h6 id="1-算术运算符：-求余-（自身-1）-–（自身-1）。"><a href="#1-算术运算符：-求余-（自身-1）-–（自身-1）。" class="headerlink" title="1.算术运算符：    +        -    *    /    %(求余)    ++（自身+1）    –（自身-1）。"></a>1.算术运算符：    +        -    *    /    %(求余)    ++（自身+1）    –（自身-1）。</h6><h6 id="2-赋值运算符：-、-、-、-、-。"><a href="#2-赋值运算符：-、-、-、-、-。" class="headerlink" title="2.赋值运算符：    =    、+=、-=、*=、%=。"></a>2.赋值运算符：    =    、+=、-=、*=、%=。</h6><h6 id="3-比较运算符（返回布尔值类型：true-false）：-gt-lt-（等于）-（全等于）-gt-lt-不等于-（不全等于）"><a href="#3-比较运算符（返回布尔值类型：true-false）：-gt-lt-（等于）-（全等于）-gt-lt-不等于-（不全等于）" class="headerlink" title="3.比较运算符（返回布尔值类型：true/false）：&gt;        &lt;     ==（等于）    ===（全等于）    &gt;=    &lt;=    !=(不等于)    !===（不全等于）"></a>3.比较运算符（返回布尔值类型：true/false）：&gt;        &lt;     ==（等于）    ===（全等于）    &gt;=    &lt;=    !=(不等于)    !===（不全等于）</h6><h6 id="4-逻辑运算符：并且（-amp-amp-）-或者（-）-非（-）-口诀：与或非。"><a href="#4-逻辑运算符：并且（-amp-amp-）-或者（-）-非（-）-口诀：与或非。" class="headerlink" title="4.逻辑运算符：并且（&amp;&amp;） 或者（||） 非（!）    口诀：与或非。"></a>4.逻辑运算符：并且（&amp;&amp;） 或者（||） 非（!）    口诀：与或非。</h6><h6 id="5-位运算符：并且-amp-或者-（-）"><a href="#5-位运算符：并且-amp-或者-（-）" class="headerlink" title="5.位运算符：并且(&amp;) 或者 （|）"></a>5.位运算符：并且(&amp;) 或者 （|）</h6><p>逻辑运算符和位运算符的区别</p>
<p>&amp;&amp;和&amp;</p>
<p>​    都是用于判断逻辑运算符，用于判断两边是否成立，区别就是&amp;&amp;在一个条件失败之后，就不再进行后面所有的比较，&amp;（位运算符）即使第一项验证为false，依然执行完所有的条件判断。</p>
<p>||和|</p>
<p>​    都是用于判断逻辑运算符，用于判断或运算多个条件中有一个成立则表达式成立，区别就是，||只要有遇到条件成立时，就不再往后执行。|即使遇到条件成立，依然执行完所有的判断条件。</p>
<p>在表单验证里面就有用到：因为点击立即注册后，使用逻辑运算符，只有第一个会提示错误，所以要用到位运算符</p>
<p>表单验证示例代码见（E:\课程每日记录\8月02日\01 QQ注册验证）；</p>
<h5 id="4-注释：对代码加入一些提示，下次翻阅更能看得懂（这些提示不会影响代码的运行）"><a href="#4-注释：对代码加入一些提示，下次翻阅更能看得懂（这些提示不会影响代码的运行）" class="headerlink" title="4.注释：对代码加入一些提示，下次翻阅更能看得懂（这些提示不会影响代码的运行）"></a>4.注释：对代码加入一些提示，下次翻阅更能看得懂（这些提示不会影响代码的运行）</h5><h6 id="单行-：在后面加入注释内容，只能对一行代码进行注释"><a href="#单行-：在后面加入注释内容，只能对一行代码进行注释" class="headerlink" title="单行: //：在后面加入注释内容，只能对一行代码进行注释"></a>单行: //：在后面加入注释内容，只能对一行代码进行注释</h6><h6 id="多行-：在中间加入注释内容，可为多行"><a href="#多行-：在中间加入注释内容，可为多行" class="headerlink" title="多行: /**/：在中间加入注释内容，可为多行"></a>多行: /**/：在中间加入注释内容，可为多行</h6><h5 id="5-程序结构"><a href="#5-程序结构" class="headerlink" title="5.程序结构"></a>5.程序结构</h5><h6 id="1-顺序结构"><a href="#1-顺序结构" class="headerlink" title="1.顺序结构"></a>1.顺序结构</h6><table>
<thead>
<tr>
<th align="center">输入</th>
<th align="center">0个或多个</th>
</tr>
</thead>
<tbody><tr>
<td align="center">输出</td>
<td align="center">1个或多个</td>
</tr>
<tr>
<td align="center">赋值</td>
<td align="center">=</td>
</tr>
</tbody></table>
<h6 id="2-选择结构"><a href="#2-选择结构" class="headerlink" title="2.选择结构"></a>2.选择结构</h6><p>选择结构表示程序的处理步骤出现了分支，他需要根据某个特定的条件选择其中的一个分支执行。选择结构有单选择、双选择和多选择三种形式。</p>
<p>​    ①if-else结构</p>
<p>​    单分支结构：</p>
<p>​        if(判断条件){</p>
<p>​        }</p>
<p>​    双分支结构：</p>
<p>​        if(判断条件){</p>
<p>​        }else if(判断条件){</p>
<p>​        }</p>
<p>​    多分支结构：</p>
<p>​    if(判断条件){</p>
<p>​    }else if(判断条件){</p>
<p>​    }else{</p>
<p>​    }</p>
<p>​    ②switch结构代码如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">switch</span>(判断条件)&#123;</span><br><span class="line">    <span class="keyword">case</span> 表达式<span class="number">1</span>:<span class="comment">/*表达式代表判断条件符合的值*/</span></span><br><span class="line">        代码;</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> 表达式<span class="number">2</span>:</span><br><span class="line">        代码;</span><br><span class="line">        <span class="keyword">break</span>；</span><br><span class="line">    <span class="keyword">case</span> 表达式<span class="number">3</span>：</span><br><span class="line">        代码;</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    .......</span><br><span class="line">    <span class="keyword">default</span>:代码</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>switch结构例子</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        .box&#123;</span><br><span class="line">            width: 350px;</span><br><span class="line">            height: 300px;</span><br><span class="line">            background-color: deeppink;</span><br><span class="line">            margin: 100px auto;</span><br><span class="line">            line-height: 300px;</span><br><span class="line">            text-align: center;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;box&quot;</span>&gt;</span><br><span class="line">    &lt;!--type=<span class="string">&quot;search&quot;</span>  type=<span class="string">&quot;text&quot;</span>   均可以输入,但是search更加友好，有一个删除按钮，用户可以点击这个按钮进行删除  --&gt;</span><br><span class="line">    请输入您的分数：&lt;input  id=<span class="string">&#x27;score&#x27;</span> type=<span class="string">&quot;search&quot;</span> placeholder=<span class="string">&quot;1--100分&quot;</span>&gt;</span><br><span class="line"> </span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">    * 按照学生的分数划分等级：</span></span><br><span class="line"><span class="comment">    * &lt;60  等级：F</span></span><br><span class="line"><span class="comment">    * 60-70  D</span></span><br><span class="line"><span class="comment">    * 70-80  C</span></span><br><span class="line"><span class="comment">    * 80-90   B</span></span><br><span class="line"><span class="comment">    * 90-100   A</span></span><br><span class="line"><span class="comment">    * */</span></span><br><span class="line"> </span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">    * 1.获取input结点    通过id名字去获取元素</span></span><br><span class="line"><span class="comment">    * document.getElementById(&quot;id名字&quot;)</span></span><br><span class="line"><span class="comment">    * 2.用户的输入值  表单元素的值   对象.value</span></span><br><span class="line"><span class="comment">    * 事件函数：    鼠标事件，  单击  双击</span></span><br><span class="line"><span class="comment">    *                键盘事件，按得那个键</span></span><br><span class="line"><span class="comment">    *                表单   元素    聚焦 onfocus  离焦onblur</span></span><br><span class="line"><span class="comment">    * 3.判断值到底是属于哪一个等级</span></span><br><span class="line"><span class="comment">    * */</span></span><br><span class="line">    <span class="keyword">var</span> stuInput=<span class="built_in">document</span>.getElementById(<span class="string">&#x27;score&#x27;</span>);</span><br><span class="line">    <span class="comment">/*获取input控件里用户输入的值*/</span></span><br><span class="line"> </span><br><span class="line">    <span class="comment">/*离焦事件如果用户在文本框离焦了，就执行&#123;&#125;里面的内容 通过离焦获取学生分数*/</span></span><br><span class="line">    stuInput.onblur=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(stuInput.value);</span><br><span class="line">        <span class="comment">/*把获取回来的用户输入值转换为数值*/</span></span><br><span class="line">        <span class="keyword">var</span> score=<span class="built_in">parseInt</span>(stuInput.value);</span><br><span class="line">        <span class="comment">/*Math.floor(4.5)  向下取整  4</span></span><br><span class="line"><span class="comment">        * Math.round(4.5)   向上取整   5</span></span><br><span class="line"><span class="comment">        * */</span></span><br><span class="line">        <span class="keyword">switch</span>(<span class="built_in">Math</span>.floor(score/<span class="number">10</span>))&#123;</span><br><span class="line">            <span class="keyword">case</span> <span class="number">10</span>:</span><br><span class="line">                alert(<span class="string">&#x27;满分 A&#x27;</span>);</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            <span class="keyword">case</span> <span class="number">9</span>:</span><br><span class="line">                alert(<span class="string">&#x27;A&#x27;</span>);</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            <span class="keyword">case</span> <span class="number">8</span>:</span><br><span class="line">                alert(<span class="string">&#x27;B&#x27;</span>);</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            <span class="keyword">case</span> <span class="number">7</span>:</span><br><span class="line">                alert(<span class="string">&#x27;C&#x27;</span>);</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            <span class="keyword">case</span> <span class="number">6</span>:</span><br><span class="line">                alert(<span class="string">&#x27;D&#x27;</span>);</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line"> </span><br><span class="line">            <span class="keyword">default</span> :alert(<span class="string">&#x27;不及格&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line"> </span><br><span class="line">    &#125;</span><br><span class="line"> </span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>③三目运算</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="comment">/*if(true)&#123;</span></span><br><span class="line"><span class="comment">			alert(123);</span></span><br><span class="line"><span class="comment">			&#125;*/</span>		</span><br><span class="line">			<span class="comment">/*if(true)alert(123);*/</span></span><br><span class="line">			</span><br><span class="line">		<span class="comment">//三目运算符</span></span><br><span class="line">		<span class="keyword">var</span> a = <span class="number">23</span>;</span><br><span class="line">		<span class="comment">/*if(a &lt; 10)&#123;</span></span><br><span class="line"><span class="comment">			a = &#x27;0&#x27; + a;</span></span><br><span class="line"><span class="comment">		 &#125;	</span></span><br><span class="line"><span class="comment">		*/</span></span><br><span class="line">		</span><br><span class="line">		a = a&lt;<span class="number">10</span>?<span class="string">&#x27;0&#x27;</span>+a:a; <span class="comment">//相当于 if  else </span></span><br><span class="line">		a = a&lt;<span class="number">10</span>?<span class="string">&#x27;0&#x27;</span>+a:a&gt;=<span class="number">24</span>?<span class="string">&#x27;时间格式错误&#x27;</span>:a;<span class="comment">//if  else if else</span></span><br><span class="line">		alert(a);		</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>利用switch结构做成的幸运大抽奖（可记录抽奖次数，中奖次数等）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">	.container&#123;</span><br><span class="line">		position:relative;</span><br><span class="line">		width:600px;</span><br><span class="line">		height:500px;</span><br><span class="line">		background:url(images/tx1.png);</span><br><span class="line">		margin:50px auto;</span><br><span class="line">		border:1px solid #ccc;</span><br><span class="line">		text-align:center;</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">	.container button&#123;</span><br><span class="line">		display:inline-block;</span><br><span class="line">		margin:230px 10px;</span><br><span class="line">		width:120px;</span><br><span class="line">		height:40px;</span><br><span class="line">		background:#ff3c3c;</span><br><span class="line">		color:#fff;</span><br><span class="line">		border:none;</span><br><span class="line">		cursor:pointer;</span><br><span class="line">		&#125;	</span><br><span class="line">		</span><br><span class="line">	.container button:hover&#123;</span><br><span class="line">		background-color:#900;</span><br><span class="line">		&#125;	</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;container&quot;</span>&gt;</span><br><span class="line">    	&lt;button onclick=<span class="string">&quot;lucky(1,0)&quot;</span>&gt;开始抽奖(单次)&lt;/button&gt;</span><br><span class="line">        &lt;button onclick=<span class="string">&quot;lucky(10,1)&quot;</span>&gt;开始抽奖(<span class="number">10</span>次)&lt;/button&gt;</span><br><span class="line">        &lt;button onclick=<span class="string">&quot;lucky(100,2)&quot;</span>&gt;开始抽奖(<span class="number">100</span>次)&lt;/button&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">    	<span class="comment">/**</span></span><br><span class="line"><span class="comment">			需求分析:</span></span><br><span class="line"><span class="comment">				1.单击抽奖按钮 ,触发抽奖机制</span></span><br><span class="line"><span class="comment">				2.通过生成的随机数,来判断中奖情况</span></span><br><span class="line"><span class="comment">					1)怎么生成随机数 =&gt; Math.random();</span></span><br><span class="line"><span class="comment">					2)随机数取值 =&gt; 对生成的0-1之间的小数 处理后 ,取整数进行判断  </span></span><br><span class="line"><span class="comment">					3)怎么判断中奖情况:8 =&gt; 一等奖 , 2 / 6 = &gt;二等奖 ,3 / 5 / 7 =&gt;三等奖</span></span><br><span class="line"><span class="comment">					</span></span><br><span class="line"><span class="comment">			作业:实现统计中奖情况:</span></span><br><span class="line"><span class="comment">				一等奖次数</span></span><br><span class="line"><span class="comment">				二等奖次数</span></span><br><span class="line"><span class="comment">				三等奖次数</span></span><br><span class="line"><span class="comment">				中奖次数</span></span><br><span class="line"><span class="comment">				综合中奖概率				</span></span><br><span class="line"><span class="comment">		*/</span></span><br><span class="line">			</span><br><span class="line">   	 <span class="keyword">var</span> list = [[<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>],[<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>],[<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>]];<span class="comment">//一个用于存储,抽奖次数,中奖次数的数组,0位置记录抽奖次数,1 , 2,3位置分别记录中123等奖次数</span></span><br><span class="line">	 </span><br><span class="line">		<span class="comment">//定义一个抽奖函数</span></span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">lucky</span>(<span class="params">number,index</span>)</span>&#123;<span class="comment">//number 指定的抽奖次数	</span></span><br><span class="line">			<span class="comment">//使用循环 ,执行重复操作</span></span><br><span class="line">			<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;number;i++)&#123;</span><br><span class="line">			list[index][<span class="number">0</span>]++;<span class="comment">//记录一下抽奖次数	</span></span><br><span class="line">			<span class="keyword">var</span> num = <span class="built_in">parseInt</span>(<span class="built_in">Math</span>.random()*<span class="number">10</span>);</span><br><span class="line">			<span class="keyword">var</span> txt = <span class="string">&quot;&quot;</span>;<span class="comment">//中奖提示</span></span><br><span class="line">					</span><br><span class="line">				<span class="keyword">switch</span>(num)&#123;</span><br><span class="line">					<span class="keyword">case</span> <span class="number">8</span>:</span><br><span class="line">						list[index][<span class="number">1</span>]++;</span><br><span class="line">						txt = <span class="string">&quot;恭喜您中得一等奖!&quot;</span>;</span><br><span class="line">						<span class="keyword">break</span>;</span><br><span class="line">					<span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">					<span class="keyword">case</span> <span class="number">6</span>:</span><br><span class="line">						list[index][<span class="number">2</span>]++;</span><br><span class="line">						txt = <span class="string">&quot;恭喜您中得二等奖!&quot;</span>;</span><br><span class="line">						<span class="keyword">break</span>;</span><br><span class="line">					<span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">					<span class="keyword">case</span> <span class="number">5</span>:</span><br><span class="line">					<span class="keyword">case</span> <span class="number">7</span>:</span><br><span class="line">						list[index][<span class="number">3</span>]++;</span><br><span class="line">						txt = <span class="string">&quot;恭喜您中得三等奖!&quot;</span>;</span><br><span class="line">						<span class="keyword">break</span>;</span><br><span class="line">					<span class="keyword">default</span> :</span><br><span class="line">						txt = <span class="string">&quot;谢谢参与,继续努力!&quot;</span>;</span><br><span class="line">						<span class="comment">//alert(&quot;谢谢参与,继续努力!&quot;);	</span></span><br><span class="line">					&#125;</span><br><span class="line">				</span><br><span class="line">			&#125;</span><br><span class="line">					</span><br><span class="line">			<span class="comment">//计算综合中奖概率</span></span><br><span class="line">			<span class="keyword">var</span> p = ((list[index][<span class="number">1</span>]+list[index][<span class="number">2</span>]+list[index][<span class="number">3</span>])/list[index][<span class="number">0</span>] * <span class="number">100</span>).toFixed(<span class="number">2</span>) + <span class="string">&#x27;%&#x27;</span>;</span><br><span class="line">					</span><br><span class="line">			alert(txt+<span class="string">&quot;\n\n中奖情况:\n一等奖:&quot;</span>+list[index][<span class="number">1</span>]+<span class="string">&quot;\n二等奖:&quot;</span>+list[index][<span class="number">2</span>]+<span class="string">&quot;\n三等奖:&quot;</span>+list[index][<span class="number">3</span>]+<span class="string">&quot;\n抽奖次数:&quot;</span>+list[index][<span class="number">0</span>]+<span class="string">&quot;\n综合中奖概率:&quot;</span>+ p );	</span><br><span class="line">			&#125;</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>





<h6 id="3-循环结构"><a href="#3-循环结构" class="headerlink" title="3.循环结构"></a>3.循环结构</h6><p>三要素：循环变量初始部分<br>循环控制条件（出口） –&gt;数组下标越界的判断        <br> 条件迭代i++ i–） </p>
<p>①for循环     </p>
<pre><code> for( 初始部分1;控制条件2 ;条件迭代)&#123;   </code></pre>
<p>               循环执行的语句<br>    }<br>    执行过程是： 1,–》2 –》4 –》3 –》2–》4–》3–》2–》4……</p>
<p>​    示例代码</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Transitional&#x2F;&#x2F;EN&quot; &quot;http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;xhtml1&#x2F;DTD&#x2F;xhtml1-transitional.dtd&quot;&gt;</span><br><span class="line">&lt;html xmlns&#x3D;&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv&#x3D;&quot;Content-Type&quot; content&#x3D;&quot;text&#x2F;html; charset&#x3D;utf-8&quot; &#x2F;&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	&#x2F;&#x2F;for() 循环</span><br><span class="line">		</span><br><span class="line">		&#x2F;*</span><br><span class="line">			for(1.初始部分;2.循环条件;4.迭代条件)&#123;</span><br><span class="line">				&#x2F;&#x2F;3.每次循环需要执行的代码</span><br><span class="line">				&#125;</span><br><span class="line">		</span><br><span class="line">		*&#x2F;</span><br><span class="line">		</span><br><span class="line">		for(var i&#x3D;0;i&lt;100;i++)&#123;</span><br><span class="line">			document.write(&quot;1教育改变生活!&lt;br&#x2F;&gt;&quot;);</span><br><span class="line">			&#125;</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>②while循环</p>
<p>​    var i=0;初始部分<br>​    while(循环条件){<br>​        循环条件满足下每一次的循环<br>​        i++;条件迭代<br>​    }</p>
<p>​    示例代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="comment">//需求 :在网页中, 输出100 行内容</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//使用while 循环 解决重复操作 : 1.循环条件(输出次数&lt;100)    2.循环操作 (输出每一次内容) </span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">/*</span></span><br><span class="line"><span class="comment">			while(循环条件)&#123;</span></span><br><span class="line"><span class="comment">				//循环条件满足下 ,执行的每一次操作</span></span><br><span class="line"><span class="comment">				</span></span><br><span class="line"><span class="comment">				&#125;</span></span><br><span class="line"><span class="comment">		</span></span><br><span class="line"><span class="comment">		**/</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//1.初始值(计数)</span></span><br><span class="line">		<span class="keyword">var</span> i = <span class="number">0</span>;</span><br><span class="line">		<span class="keyword">while</span>(i&lt;<span class="number">100</span>)&#123;<span class="comment">//2.循环条件</span></span><br><span class="line">			</span><br><span class="line">			<span class="comment">//3.每一次的循环操作</span></span><br><span class="line">			<span class="built_in">document</span>.write(<span class="string">&quot;1教育改变生活!&lt;br/&gt;&quot;</span>);</span><br><span class="line">			</span><br><span class="line">		i++;<span class="comment">//4.迭代条件	</span></span><br><span class="line">		</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//在循环条件不明确的时候 ,使用while 循环比较多 </span></span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<p>③do…while循环：无论条件成立，至少都会循环一次</p>
<p>示例代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="comment">//do ... while 循环</span></span><br><span class="line">		<span class="comment">//无论条件十分成立 ,至少会执行一次.</span></span><br><span class="line">		<span class="keyword">var</span> i = <span class="number">11</span>;</span><br><span class="line">		<span class="keyword">do</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="number">123</span>);</span><br><span class="line">			i++;</span><br><span class="line">		  &#125;<span class="keyword">while</span>(i&lt;<span class="number">10</span>)</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>④for in循环：遍历数组</p>
<p>示例代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="keyword">var</span> arr = [<span class="string">&#x27;orange&#x27;</span>,<span class="string">&#x27;apple&#x27;</span>,<span class="string">&#x27;banana&#x27;</span>,<span class="string">&#x27;peach&#x27;</span>];</span><br><span class="line">			</span><br><span class="line">			<span class="comment">/*for(var i=0;i&lt;arr.length;i++)&#123;</span></span><br><span class="line"><span class="comment">				console.log(arr[i]);</span></span><br><span class="line"><span class="comment">				&#125;*/</span></span><br><span class="line">					</span><br><span class="line">			<span class="comment">//for in 遍历数组	</span></span><br><span class="line">			<span class="keyword">for</span>(index <span class="keyword">in</span> arr)&#123;</span><br><span class="line">				<span class="built_in">console</span>.log(index,arr[index]);</span><br><span class="line">				</span><br><span class="line">				&#125;		</span><br><span class="line">					</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="嵌套循环（多重循环）"><a href="#嵌套循环（多重循环）" class="headerlink" title="嵌套循环（多重循环）"></a>嵌套循环（多重循环）</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">10</span>;i++)&#123;</span><br><span class="line">			 <span class="keyword">for</span>(<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;<span class="number">5</span>;j++)&#123;</span><br><span class="line">				 <span class="built_in">console</span>.log(<span class="string">&#x27;这是几次输出!&#x27;</span>);</span><br><span class="line">			  &#125;</span><br><span class="line">		  &#125;</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h6 id="使用循环结构做乘法口诀表案例（双重循环）"><a href="#使用循环结构做乘法口诀表案例（双重循环）" class="headerlink" title="使用循环结构做乘法口诀表案例（双重循环）"></a>使用循环结构做乘法口诀表案例（双重循环）</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">.box span&#123;</span><br><span class="line">	display:inline-block;</span><br><span class="line">	width:100px;</span><br><span class="line">	height:30px;</span><br><span class="line">	border:1px solid #ccc;</span><br><span class="line">	line-height:30px;</span><br><span class="line">	text-indent:10px;</span><br><span class="line">	font-weight:bold;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">.box span.even&#123;</span><br><span class="line">	background:#f9f9f9;</span><br><span class="line">	&#125;	</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;box&quot;</span>&gt;</span><br><span class="line">    	&lt;script&gt;</span><br><span class="line">    	<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">1</span>;i&lt;=<span class="number">9</span>;i++)&#123;</span><br><span class="line">			<span class="keyword">for</span>(<span class="keyword">var</span> j=<span class="number">1</span>;j&lt;=i;j++)&#123;</span><br><span class="line">				<span class="built_in">document</span>.write( <span class="string">&#x27;&lt;span class=&quot;&#x27;</span>+(i%<span class="number">2</span>==<span class="number">0</span>?<span class="string">&quot;even&quot;</span>:<span class="string">&quot;odd&quot;</span>)+<span class="string">&#x27;&quot; style=&quot;color:&#x27;</span>+creatRGBColor()+<span class="string">&#x27;;&quot;&gt;&#x27;</span>+ i +<span class="string">&#x27; X &#x27;</span>+ j + <span class="string">&#x27; = &#x27;</span> + i*j + <span class="string">&#x27;&lt;/span&gt;&#x27;</span> );</span><br><span class="line">				&#125;	</span><br><span class="line">			<span class="built_in">document</span>.write(<span class="string">&#x27;&lt;br/&gt;&#x27;</span>);	</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">		<span class="comment">//回顾: 颜色表示方式: 1.关键字  2.十六进制  3.rgb  rgb(255,255,255);</span></span><br><span class="line">		</span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">creatRGBColor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="keyword">var</span> R = <span class="built_in">parseInt</span>(<span class="built_in">Math</span>.random()*<span class="number">256</span>);</span><br><span class="line">			<span class="keyword">var</span> G = <span class="built_in">parseInt</span>(<span class="built_in">Math</span>.random()*<span class="number">256</span>);</span><br><span class="line">			<span class="keyword">var</span> B = <span class="built_in">parseInt</span>(<span class="built_in">Math</span>.random()*<span class="number">256</span>);</span><br><span class="line">			</span><br><span class="line">			<span class="keyword">return</span> <span class="string">&#x27;rgb(&#x27;</span>+R+<span class="string">&#x27;,&#x27;</span>+G+<span class="string">&#x27;,&#x27;</span>+B+<span class="string">&#x27;)&#x27;</span>;</span><br><span class="line">			&#125;	</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="for-循环的怪异行为案例一"><a href="#for-循环的怪异行为案例一" class="headerlink" title="for 循环的怪异行为案例一"></a>for 循环的怪异行为案例一</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.length;i++)&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(arr[i]);</span><br><span class="line">			&#125;</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//建议使用以下方式:第一种方式,每次循环都需要去获取一次数组长度,进行不必要的数组操作,浪费性能 ,把数组长度值,通过len缓存起来,这样就避免了频繁的获取数组长度 ,提高性能</span></span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>,len=arr.length;i&lt;len;i++)&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(arr[i]);</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">		</span><br><span class="line">			</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h6 id="for循环的怪异行为案例二"><a href="#for循环的怪异行为案例二" class="headerlink" title="for循环的怪异行为案例二"></a>for循环的怪异行为案例二</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//1.以下情况,两个判断循环条件,则以第二个为主</span></span><br><span class="line">		<span class="comment">/*for(var i=0,j=0;i&lt;6,j&lt;4;i++,j++)&#123;</span></span><br><span class="line"><span class="comment">			console.log(arr[i]);</span></span><br><span class="line"><span class="comment">			&#125;*/</span></span><br><span class="line">			</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//2.以下情况,两个表达式1&amp;表达式2 ,谁先不满足条件,就以谁为主 结束循环</span></span><br><span class="line">		<span class="comment">/*for(var i=0,j=0;i&lt;8&amp;j&lt;6;i++,j++)&#123;</span></span><br><span class="line"><span class="comment">			console.log(arr[i]);</span></span><br><span class="line"><span class="comment">			&#125;*/</span></span><br><span class="line">			</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//3.以下情况,两个表达式1|表达式2,谁最后不满足条件,就以谁为主,结束循环</span></span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>,j=<span class="number">0</span>;i&lt;<span class="number">8</span>|j&lt;<span class="number">6</span>;i++,j++)&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(arr[i]);</span><br><span class="line">			&#125;			</span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">					</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h5 id="6-数组"><a href="#6-数组" class="headerlink" title="6.数组"></a>6.数组</h5><h6 id="1-定义数组"><a href="#1-定义数组" class="headerlink" title="1.定义数组:"></a>1.定义数组:</h6><h6 id="1-先声明-后赋值-1"><a href="#1-先声明-后赋值-1" class="headerlink" title="1.先声明 ,后赋值"></a>1.先声明 ,后赋值</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">5</span>);</span><br><span class="line">	arr[<span class="number">0</span>] = <span class="number">20</span>;</span><br></pre></td></tr></table></figure>

<h6 id="2-直接声明赋值"><a href="#2-直接声明赋值" class="headerlink" title="2.直接声明赋值"></a>2.直接声明赋值</h6><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var arr &#x3D; new Array(10,20,30);</span><br></pre></td></tr></table></figure>

<h6 id="3-变量命名规范"><a href="#3-变量命名规范" class="headerlink" title="3.变量命名规范"></a>3.变量命名规范</h6><p>​    ①不能使用特殊字符，只允许使用字母，数字，下划线，$。<br>​    ②不能以数字开头，可以使用字母，下划线，$开头。<br>​    ③不能使用关键字，保留字作为变量名。</p>
<table>
<thead>
<tr>
<th align="center">break</th>
<th align="center">case</th>
<th align="center">catch</th>
<th align="center">continue</th>
<th align="center">default</th>
</tr>
</thead>
<tbody><tr>
<td align="center">delete</td>
<td align="center">do</td>
<td align="center">else</td>
<td align="center">finally</td>
<td align="center">for</td>
</tr>
<tr>
<td align="center">function</td>
<td align="center">if</td>
<td align="center">in</td>
<td align="center">instanceof</td>
<td align="center">new</td>
</tr>
<tr>
<td align="center">return</td>
<td align="center">switch</td>
<td align="center">this</td>
<td align="center">throw</td>
<td align="center">try</td>
</tr>
<tr>
<td align="center">typeof</td>
<td align="center">var</td>
<td align="center">void</td>
<td align="center">while</td>
<td align="center">with</td>
</tr>
</tbody></table>
<p>​    ④建议使用驼峰命名法，命名（多个单词组合，从第一个单词开始每个单词首字母大写）。<br>​        例：var studentName=’张三’;<br>​    ⑤起名要做到见名识义（如果不规范好，只要代码稍微多一点，就会搞混淆）。</p>
<h6 id="4-字面量方式创建"><a href="#4-字面量方式创建" class="headerlink" title="4.字面量方式创建"></a>4.字面量方式创建</h6><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var arr &#x3D; [10,20,30];</span><br></pre></td></tr></table></figure>

<blockquote>
<p>数组通过下标访问 , 数组下标从0开始.</p>
</blockquote>
<h6 id="5，二维数组和多维数组"><a href="#5，二维数组和多维数组" class="headerlink" title="5，二维数组和多维数组"></a>5，二维数组和多维数组</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]; <span class="comment">//一维数组</span></span><br><span class="line">		</span><br><span class="line">		<span class="keyword">var</span> arr2 = [[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>],[<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>],[<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>]];<span class="comment">//二维数组</span></span><br><span class="line">		</span><br><span class="line">		<span class="keyword">var</span> arr3 = [</span><br><span class="line">			[</span><br><span class="line">				[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line">				]</span><br><span class="line">			]; <span class="comment">//三维数组</span></span><br><span class="line">		</span><br><span class="line">		alert(arr2[<span class="number">2</span>][<span class="number">1</span>]);</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="6，数组遍历的方法（ES6）"><a href="#6，数组遍历的方法（ES6）" class="headerlink" title="6，数组遍历的方法（ES6）"></a>6，数组遍历的方法（ES6）</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//forEach() 遍历数组</span></span><br><span class="line">		arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">item,index</span>)</span>&#123;</span><br><span class="line">				<span class="comment">//console.log(&#x27;索引值为:&#x27;,index,&#x27;元素为:&#x27;,item)</span></span><br><span class="line">			&#125;);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//[1,4,9,16,25]</span></span><br><span class="line">		<span class="keyword">var</span> arr2 = arr.map(<span class="function"><span class="keyword">function</span>(<span class="params">item</span>)</span>&#123;<span class="comment">// item 就是每一次遍历数组的元素</span></span><br><span class="line">			<span class="comment">//console.log(item);</span></span><br><span class="line">			<span class="keyword">return</span> item * item; <span class="comment">//返回元素的平方  ,return 将值返回</span></span><br><span class="line">			&#125;)</span><br><span class="line">			</span><br><span class="line">		<span class="comment">//0 表示女 ,  1男  = &gt; </span></span><br><span class="line">		<span class="keyword">var</span> sexs = [<span class="number">0</span>,<span class="number">0</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">0</span>,<span class="number">1</span>,<span class="number">0</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">1</span>];</span><br><span class="line">		</span><br><span class="line">		<span class="comment">/*var abc = [];</span></span><br><span class="line"><span class="comment">		for(var i=0;i&lt;sexs.length;i++)&#123;</span></span><br><span class="line"><span class="comment">			if(sexs[i]==0)&#123;</span></span><br><span class="line"><span class="comment">				abc.push(&#x27;女&#x27;);</span></span><br><span class="line"><span class="comment">				&#125;else&#123;</span></span><br><span class="line"><span class="comment">				abc.push(&#x27;男&#x27;);	</span></span><br><span class="line"><span class="comment">					&#125;</span></span><br><span class="line"><span class="comment">			&#125;*/</span>	</span><br><span class="line">			</span><br><span class="line">		</span><br><span class="line">		<span class="comment">/*var abc = [];</span></span><br><span class="line"><span class="comment">		sexs.forEach(function(item)&#123;</span></span><br><span class="line"><span class="comment">			abc.push(item?&#x27;男&#x27;:&#x27;女&#x27;);</span></span><br><span class="line"><span class="comment">			&#125;)	*/</span></span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">var</span> abc = sexs.map(<span class="function"><span class="keyword">function</span>(<span class="params">item</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> item?<span class="string">&#x27;男&#x27;</span>:<span class="string">&#x27;女&#x27;</span>;</span><br><span class="line">			&#125;)	</span><br><span class="line">			</span><br><span class="line">		<span class="comment">//</span></span><br><span class="line">		<span class="keyword">var</span> socer = [<span class="number">59</span>,<span class="number">60</span>,<span class="number">65</span>,<span class="number">32</span>,<span class="number">49</span>,<span class="number">85</span>,<span class="number">26</span>,<span class="number">19</span>,<span class="number">98</span>,<span class="number">84</span>,<span class="number">76</span>,<span class="number">66</span>];</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//var aa = [];</span></span><br><span class="line">		</span><br><span class="line">	<span class="comment">/*	for(var i=0;i&lt;socer.length;i++)&#123;</span></span><br><span class="line"><span class="comment">			if(socer[i]&lt;60)&#123;</span></span><br><span class="line"><span class="comment">				aa.push(socer[i]);</span></span><br><span class="line"><span class="comment">				&#125;</span></span><br><span class="line"><span class="comment">			&#125;*/</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">/*socer.forEach(function(item)&#123;</span></span><br><span class="line"><span class="comment">			if(item &lt; 60)&#123;</span></span><br><span class="line"><span class="comment">				aa.push(item);</span></span><br><span class="line"><span class="comment">				&#125;</span></span><br><span class="line"><span class="comment">			&#125;)*/</span></span><br><span class="line">				</span><br><span class="line">		<span class="keyword">var</span> aa = socer.filter(<span class="function"><span class="keyword">function</span>(<span class="params">item</span>)</span>&#123;</span><br><span class="line">				<span class="keyword">return</span> item &lt; <span class="number">60</span>; <span class="comment">//只要返回布尔值true , 则就将item 元素放入aa 数组</span></span><br><span class="line">			&#125;)</span><br><span class="line">			</span><br><span class="line">		<span class="keyword">var</span> cc =socer.map(<span class="function"><span class="keyword">function</span>(<span class="params">item</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> item&lt;<span class="number">60</span>?<span class="string">&#x27;不及格&#x27;</span>:item&gt;<span class="number">80</span>?<span class="string">&#x27;优秀&#x27;</span>:<span class="string">&#x27;及格&#x27;</span>;</span><br><span class="line">			&#125;)	</span><br><span class="line">			</span><br><span class="line">			</span><br><span class="line">		<span class="comment">//reduce() 	累计 </span></span><br><span class="line">		<span class="keyword">var</span> sum = socer.reduce(<span class="function"><span class="keyword">function</span>(<span class="params">total,item</span>)</span>&#123;</span><br><span class="line">				<span class="built_in">console</span>.log(item,total);</span><br><span class="line">				<span class="keyword">return</span> total +=item;</span><br><span class="line">			&#125;)	</span><br><span class="line">				</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="7，document-write"><a href="#7，document-write" class="headerlink" title="7，document.write"></a>7，document.write</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">	.box&#123;</span><br><span class="line">		width:600px;</span><br><span class="line">		height:300px;</span><br><span class="line">		border:1px solid red;</span><br><span class="line">		margin:50px auto;</span><br><span class="line">		&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	选择出生年份:</span><br><span class="line">    	&lt;select&gt;</span><br><span class="line">        	&lt;script&gt;</span><br><span class="line">            	<span class="keyword">for</span>(<span class="keyword">var</span> y = <span class="number">2019</span>;y&gt;=<span class="number">1920</span>;y--)&#123;</span><br><span class="line">					<span class="built_in">document</span>.write(<span class="string">&#x27;&lt;option&gt;&#x27;</span>+y+<span class="string">&#x27;&lt;/option&gt;&#x27;</span>);</span><br><span class="line">					&#125;</span><br><span class="line">            &lt;/script&gt;</span><br><span class="line">        &lt;/select&gt;</span><br><span class="line">	&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;box&quot;</span>&gt;</span><br><span class="line">   	 	&lt;script&gt;</span><br><span class="line">    		<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">70</span>;i&gt;=<span class="number">10</span>;i-=<span class="number">10</span>)&#123;</span><br><span class="line">				<span class="built_in">document</span>.write(<span class="string">&#x27;&lt;hr width=&quot;&#x27;</span>+i+<span class="string">&#x27;%&quot;/&gt;&#x27;</span>);</span><br><span class="line">			&#125;</span><br><span class="line">    	&lt;/script&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    </span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h5 id="数组的属性"><a href="#数组的属性" class="headerlink" title="数组的属性:"></a>数组的属性:</h5><p>​    length   返回数组的长度</p>
<h5 id="数组的常用方法"><a href="#数组的常用方法" class="headerlink" title="数组的常用方法:"></a>数组的常用方法:</h5><blockquote>
<p>罗列常用的方法 ,及使用案例…..</p>
<p>1，join()：将数组中的所有元素，通过一个指定的字符（默认为     ,），拼接成一个字符串。</p>
<p>2，concat()：将多个数组拼合成一个数组。</p>
<p>3，reverse()：将数组中的元素调换顺序。</p>
<p>4，push()：在数组的末尾追加一个或多个元素，返回数组的新的长度。</p>
<p>5，pop()：删除数组的最后一个元素，返回被删除的元素。</p>
<p>6，shift()：删除数组的开头的一个元素，返回被删除的元素。</p>
<p>7，unshift()：在数组的开头添加一个或者多个元素，返回数组的新的长度。</p>
<p>8，slice(start,end)：截取数组中的元素，start&lt;=x&lt;end，如果设置了范围则截取范围里的元素，没设置的话则全部截取。</p>
<p>9，splice(index,howmany,item,item…)：索引数组中的index位置的，howmany个元素，再在该数组中添加item元素，可添无数个。</p>
<p>10，indexOf(item,[index])：查找元素在数组中首次出现的位置，没设置开始查找位置index的话默认从第一个元素开始找，设置了的话，从index位置开始找首次出现的位置，（最后都是返回查找到的元素的位置下标），如果没找到则返回-1。</p>
<p>11，sort()：将数组的元素进行排序，以数组的元素编码大小排序，（一般可以在网上查找该数组的16进制编码）。</p>
<p>12，toString()：将数组转化成字符串。</p>
<p>13，includes(item,[index])：用于检测item元素是否存在于与数组，如果是，则返回true，如果不是则返回false，index为查找的开始位置。</p>
<p>14，forEach()：遍历数组，数组遍历方法，与循环相似。</p>
<p>15，filter()：过滤，筛选；以自己提出的条件对数组进行筛选，挑选出来符合条件的元素。</p>
<p>16，map()：地图，映射；将数据按照自己提出的一定要求，映射成另外一种格式或数据（也就是把原数组种的元素以自己设置的item元素的符合条件，替换成对应的元素。）</p>
<p>17，reduce()：累加，累乘，累除，累减…</p>
<p>18，flat(num)：扁平化处理，num是展开的次数，通俗的说就是把一个多维数组进行降维处理，比如三维到一维需要两次，即num=2。</p>
<p>19，fill(str,start,end)：直接将数组中的元素替换成start&lt;=x&lt;end之间的指定的str元素或者字符，没设置区间的话默认全部替换。</p>
<p>20，lastIndexOf(item,[index])：查找数组中的最后一次出现的item元素，index为查找位置。（最后还是返回查找的元素的位置下标） ，没找到默认为-1。   </p>
<p>数组的方法代码如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        <span class="comment">//创建数组方式一</span></span><br><span class="line">        <span class="keyword">var</span> arr=<span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">5</span>);</span><br><span class="line">            arr[<span class="number">0</span>]=<span class="string">&#x27;apple&#x27;</span></span><br><span class="line">            arr[<span class="number">1</span>]=<span class="string">&#x27;banana&#x27;</span></span><br><span class="line">            arr[<span class="number">2</span>]=<span class="string">&#x27;orange&#x27;</span></span><br><span class="line">            arr[<span class="number">3</span>]=<span class="string">&#x27;peach&#x27;</span></span><br><span class="line">            arr[<span class="number">4</span>]=<span class="string">&#x27;grape&#x27;</span></span><br><span class="line"><span class="comment">//      alert(arr[3]);</span></span><br><span class="line">        <span class="comment">//创建数组方式二</span></span><br><span class="line">        <span class="keyword">var</span> arr2=<span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">&quot;apple&quot;</span>,<span class="string">&quot;banana&quot;</span>,<span class="string">&quot;orange&quot;</span>,<span class="string">&quot;peach&quot;</span>,<span class="string">&quot;grape&quot;</span>);</span><br><span class="line"><span class="comment">//      alert(arr2[3]);</span></span><br><span class="line">        <span class="comment">//创建数组方式三</span></span><br><span class="line">        <span class="keyword">var</span> arr3=[<span class="string">&quot;apple&quot;</span>,<span class="string">&quot;banana&quot;</span>,<span class="string">&quot;orange&quot;</span>,<span class="string">&quot;peach&quot;</span>,<span class="string">&quot;grape&quot;</span>,<span class="string">&quot;apple&quot;</span>,<span class="string">&quot;banana&quot;</span>,<span class="string">&quot;orange&quot;</span>,<span class="string">&quot;peach&quot;</span>,<span class="string">&quot;grape&quot;</span>];</span><br><span class="line">        <span class="keyword">var</span> arr4=[[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>],[<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>],[<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>]]</span><br><span class="line">        <span class="keyword">var</span> socer=[<span class="number">20</span>,<span class="number">25</span>,<span class="number">65</span>,<span class="number">56</span>,<span class="number">58</span>,<span class="number">50</span>,<span class="number">90</span>,<span class="number">100</span>,<span class="number">75</span>,<span class="number">60</span>,<span class="number">80</span>];</span><br><span class="line"><span class="comment">//      alert(arr3[3]);</span></span><br><span class="line">        <span class="comment">//数组属性length</span></span><br><span class="line"><span class="comment">//      alert(arr3.length);</span></span><br><span class="line">        <span class="comment">/*数组九种方法*/</span></span><br><span class="line">            <span class="comment">//第一种join()</span></span><br><span class="line"><span class="comment">//      alert(arr3.join(&quot;|&quot;));/*将数组中的所有元素，通过一个指定的字符（默认为，）可以为任何东西，拼接成一个字符串。*/</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line">            <span class="comment">//第二种concat()</span></span><br><span class="line"><span class="comment">//      alert(arr3.concat(arr2));/*将多个数组拼合成一个数组。*/</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line">            <span class="comment">//第三种reverse()</span></span><br><span class="line"><span class="comment">//      alert(arr3.reverse());/*将数组中的元素顺序调换。*/</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line">            <span class="comment">//第四种push()</span></span><br><span class="line"><span class="comment">//      alert(arr3.push(&quot;apple&quot;, &quot;peach&quot;));/*在数组的尾端追加一个或多个元素，返回数组的新长度*/</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line">            <span class="comment">//第五种pop()</span></span><br><span class="line"><span class="comment">//      alert(arr3.pop());/*删除数组的最后一个元素，返回被删除的元素*/</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line">            <span class="comment">//第六种shift()</span></span><br><span class="line"><span class="comment">//      alert(arr3.shift());/*删除数组的第一个元素，返回被删除的元素*/</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line">            <span class="comment">//第七种unshift()</span></span><br><span class="line"><span class="comment">//      alert(arr3.unshift(&quot;hh&quot;,&quot;heihei&quot;));/*给数组元素的开头添加一个或者多个元素，返回元素的长度*/</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line">            <span class="comment">//第八种slice(start,end)start&lt;=x&lt;end</span></span><br><span class="line"><span class="comment">//      alert(arr3.slice(-5,-3));/*截取数组中的元素，在start和end之间，start自己算一个end不算，返回截取的一个或者多个元素。*/</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line">            <span class="comment">//第九种splice(index,howmany,item,item...)</span></span><br><span class="line">        <span class="comment">// alert(arr3.splice(2,3,&quot;hhhh&quot;));/*删除数组中的索引值为index位置的元素，个数为howmany个，然后再该位置加item元素。*/</span></span><br><span class="line">        <span class="comment">//</span></span><br><span class="line">        <span class="comment">//</span></span><br><span class="line">        <span class="comment">//</span></span><br><span class="line">            <span class="comment">//第十种indexOf(item,index)</span></span><br><span class="line">            <span class="comment">// alert(arr3.indexOf(&quot;apple&quot;,[1]));/*元素在数组中首次出现的位置，指定从什么位置(index)开始查找item的首次出现位置，默认为0，如果返回-1，表示没有找到。</span></span><br><span class="line">            <span class="comment">//</span></span><br><span class="line">            <span class="comment">//</span></span><br><span class="line">            <span class="comment">//</span></span><br><span class="line">            <span class="comment">//第十一种sort()对数组中的元素进行排序(以元素的编码大小进行排序),编码为16进制可转化为10进制。</span></span><br><span class="line">            <span class="comment">//</span></span><br><span class="line">            <span class="comment">//</span></span><br><span class="line">            <span class="comment">//</span></span><br><span class="line">            <span class="comment">//</span></span><br><span class="line">            <span class="comment">//第十二种toString()将此数组转化成一个字符串(即里面的双引号都删除，只留下最外面两边的双引号)。</span></span><br><span class="line">            <span class="comment">//</span></span><br><span class="line">            <span class="comment">//</span></span><br><span class="line">            <span class="comment">//</span></span><br><span class="line">            <span class="comment">//</span></span><br><span class="line"><span class="comment">//下面是ES6新增的方法:</span></span><br><span class="line">            <span class="comment">//第十三种includes(item,[index]);</span></span><br><span class="line">        <span class="comment">// alert(arr3.includes(&quot;apple&quot;,5));/*用于检测item元素是否存在于数组，如果是则返回true，否则返回false，index为开始查找是否存在的位置。</span></span><br><span class="line">        <span class="comment">// 下面四个和循环有关系</span></span><br><span class="line">        <span class="comment">//</span></span><br><span class="line">        <span class="comment">//</span></span><br><span class="line">        <span class="comment">//</span></span><br><span class="line">            <span class="comment">//第十四种forEach()</span></span><br><span class="line">           <span class="comment">/*例：可利用forEach()来循环一个数组长度的次数，如果是用for，while，do while，for in循环的1话可能会更加麻烦*/</span></span><br><span class="line">           <span class="comment">// var sexs=[0,1,0,0,1,0,1,0,1,1,1,1,0,0,1]</span></span><br><span class="line">           <span class="comment">// var newSexs=[];</span></span><br><span class="line">           <span class="comment">// sexs.forEach(function(item)&#123;</span></span><br><span class="line">           <span class="comment">//  newSexs.push(item?&quot;男&quot;:&quot;女&quot;)</span></span><br><span class="line">           <span class="comment">// &#125;)</span></span><br><span class="line">           <span class="comment">// document.write(newSexs);</span></span><br><span class="line">           <span class="comment">/*遍历数组的方法，和循环有点相似，不过只循环数组每个元素一遍，即数组的长度。使用产生的效果是把原数组循环一遍，以你自己设置好的条件是替换这个数组里面的元素还是删除(或者其他的方法都可以在这里面使用，和循环相似)这个数组里面的元素。*/</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">           <span class="comment">//第十五种filter()</span></span><br><span class="line">           <span class="comment">//  var ff=socer.filter(function(item)&#123;</span></span><br><span class="line">           <span class="comment">//       return item&lt;60;</span></span><br><span class="line">           <span class="comment">// &#125;)</span></span><br><span class="line">           <span class="comment">/*以自己对item设置的条件进行筛选符合条件的原数组socer中的元素放到一个新的数组ff中，例子中我做了一个筛选出不及格的人的分数放到了ff数组中。</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">            //第十六种map()地图，映射的意思，在我们程序里面可当做把原数组socer中的元素以自己设置的item元素的符合条件，替换成对应的元素，例：*/</span></span><br><span class="line">            <span class="comment">// var mm=socer.map(function(item)&#123;</span></span><br><span class="line">            <span class="comment">//     return item&lt;60?&quot;不及格&quot;:item&gt;80?&quot;优秀&quot;:&quot;及格&quot;;</span></span><br><span class="line">            <span class="comment">// &#125;)</span></span><br><span class="line">            <span class="comment">/*return是将值返回给mm，这段的意思是，把成绩小于60分的同学定为不及格，大于80分的定为优秀，另外的也就是60到80之间的是及格，最后再把得到的元素即&quot;及格&quot;，&quot;不及格&quot;，&quot;优秀&quot;对应的替换到mm数组*/</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">            <span class="comment">//第十七种reduce()求累加，累减，累乘，累除等。</span></span><br><span class="line">            <span class="comment">// var rr=socer.reduce(function(sum,item)&#123;</span></span><br><span class="line">            <span class="comment">//         console.log(item,sum);</span></span><br><span class="line">            <span class="comment">//         return sum+=item;</span></span><br><span class="line">            <span class="comment">//         &#125;)</span></span><br><span class="line">                    <span class="comment">/*可以吧加号换成*号就是累乘，-号和/号也是一样的，item是最后一项即an，sum是第一项到倒数第二项之和即Sn-1，他们两个加起来就是Sn整个数组的元素之和*/</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">            <span class="comment">//第十八种flat(num)</span></span><br><span class="line">            <span class="comment">// alert(arr4.flat());/*扁平化处理，num是展开的次数，例：三维一维需要num=2即两次，此方法是对一个多维数组进行降维处理*/</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">            <span class="comment">//第十九种fill(str,start,end)</span></span><br><span class="line">            <span class="comment">// alert(arr3.fill(1,0,5));/*此方法的作用是直接将数组的元素替换成指定的元素str（可以是字符等其他东西），start&lt;=x&lt;end,如果不加start和end截取的位置的话，默认全部替换。</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">            <span class="comment">//第二十种lastIndexOf(item,[index])</span></span><br><span class="line">            alert(arr3.lastIndexOf(<span class="string">&quot;apple&quot;</span>,<span class="number">2</span>));<span class="comment">/*此方法与indexOf索引元素方向相反，返回item出现的最后一个位置，index为查找截止索引的位置，找不到返回-1*/</span></span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
</blockquote>
<h6 id="拓展知识子数组排序算法-冒泡排序"><a href="#拓展知识子数组排序算法-冒泡排序" class="headerlink" title="拓展知识子数组排序算法-冒泡排序"></a>拓展知识子数组排序算法-冒泡排序</h6><p>(每一轮循环)每次把数组中的前一项与其后一项的对比,如果前一项,大于后一项,则两个人交换位置.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">		<span class="comment">/**</span></span><br><span class="line"><span class="comment">			冒泡排序算法:</span></span><br><span class="line"><span class="comment">				(每一轮循环)每次把数组中的前一项与其后一项的对比,如果前一项,大于后一项,则两个人交换位置.</span></span><br><span class="line"><span class="comment">				</span></span><br><span class="line"><span class="comment">		冒泡排序的过程:</span></span><br><span class="line"><span class="comment">			第一轮:</span></span><br><span class="line"><span class="comment">			1.[3,5,1,4,2]</span></span><br><span class="line"><span class="comment">			2.[3,1,5,4,2]</span></span><br><span class="line"><span class="comment">			3.[3,1,4,5,2]</span></span><br><span class="line"><span class="comment">			4.[3,1,4,2,5]  (找出数组中的最大值)</span></span><br><span class="line"><span class="comment">			5.[3,1,4,2,5]</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			第二轮:</span></span><br><span class="line"><span class="comment">			6.[1,3,4,2,5]</span></span><br><span class="line"><span class="comment">			7.[1,3,4,2,5]</span></span><br><span class="line"><span class="comment">			8.[1,3,2,4,5]</span></span><br><span class="line"><span class="comment">			9.[1,3,2,4,5]</span></span><br><span class="line"><span class="comment">			10.[1,3,2,4,5]</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			第三轮:</span></span><br><span class="line"><span class="comment">			11.[1,3,2,4,5]</span></span><br><span class="line"><span class="comment">			12.[1,2,3,4,5]</span></span><br><span class="line"><span class="comment">			13.[1,2,3,4,5]</span></span><br><span class="line"><span class="comment">			14.[1,2,3,4,5]</span></span><br><span class="line"><span class="comment">			15.[1,2,3,4,5]</span></span><br><span class="line"><span class="comment">			...</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			第五轮:</span></span><br><span class="line"><span class="comment">			....</span></span><br><span class="line"><span class="comment">				</span></span><br><span class="line"><span class="comment">					</span></span><br><span class="line"><span class="comment">				</span></span><br><span class="line"><span class="comment">		*/</span></span><br><span class="line">		</span><br><span class="line">    	<span class="keyword">var</span> arr = [<span class="number">5</span>,<span class="number">3</span>,<span class="number">1</span>,<span class="number">4</span>,<span class="number">2</span>];</span><br><span class="line">		<span class="comment">//var arr = [15,23,31,24,12,9,10,61,52,34];</span></span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.length;i++)&#123;</span><br><span class="line">			<span class="keyword">for</span>(<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;arr.length;j++)&#123;</span><br><span class="line">				<span class="keyword">if</span>(arr[j]&gt;arr[j+<span class="number">1</span>])&#123;</span><br><span class="line">					<span class="keyword">var</span> tmp = arr[j];</span><br><span class="line">						arr[j] = arr[j+<span class="number">1</span>];</span><br><span class="line">						arr[j+<span class="number">1</span>] = tmp;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//冒泡优化方案: https://blog.csdn.net/hansionz/article/details/80822494</span></span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="数组去重算法（去掉数组中重复的元素，一个元素只在数组中出现一次）"><a href="#数组去重算法（去掉数组中重复的元素，一个元素只在数组中出现一次）" class="headerlink" title="数组去重算法（去掉数组中重复的元素，一个元素只在数组中出现一次）"></a>数组去重算法（去掉数组中重复的元素，一个元素只在数组中出现一次）</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">		<span class="comment">//去重算法 一 :</span></span><br><span class="line">    	<span class="keyword">var</span> arr = [<span class="number">10</span>,<span class="number">2</span>,<span class="number">0</span>,<span class="number">10</span>,<span class="number">20</span>,<span class="number">5</span>,<span class="number">8</span>,<span class="number">9</span>,<span class="number">10</span>];</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">var</span> tmp = [];</span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.length;i++)&#123;</span><br><span class="line">			<span class="keyword">if</span>(!tmp.includes(arr[i]))&#123;</span><br><span class="line">				tmp.push(arr[i]);</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">			</span><br><span class="line">		<span class="comment">//去重算法 二 :  ES6新增语法解决</span></span><br><span class="line">		<span class="keyword">var</span> tmp2 = <span class="keyword">new</span> <span class="built_in">Set</span>(arr); <span class="comment">//Set() 集合 (另一种类似数组的数据,再ES6中新增的 ,集合中的数据是唯一的)</span></span><br><span class="line">			arr3 = <span class="built_in">Array</span>.from(tmp2);<span class="comment">//将集合转换成数组</span></span><br><span class="line">			</span><br><span class="line">				</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<p> <em>arguments</em> 是一个对应于传递给函数的参数的类数组对象(伪数组对象)</p>
<h5 id="7-函数"><a href="#7-函数" class="headerlink" title="7.函数:"></a>7.函数:</h5><h6 id="1，定义函数"><a href="#1，定义函数" class="headerlink" title="1，定义函数"></a>1，定义函数</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;button onclick=<span class="string">&quot;add()&quot;</span>&gt;点击运行函数&lt;/button&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">		<span class="comment">//函数:可以实现特定功能的代码块语句  , 也可以称&quot;方法 / 功能&quot;</span></span><br><span class="line">    	<span class="comment">//函数分类: 系统函数 , 自定义函数</span></span><br><span class="line">		<span class="comment">//定义函数 :1.有参函数  ,  2.无参函数</span></span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//定义一个无参函数</span></span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">//console.log(10 + 20 );</span></span><br><span class="line">			<span class="comment">//函数中 , 可以有函数运行的返回结果</span></span><br><span class="line">			<span class="keyword">return</span> <span class="number">10</span> + <span class="number">20</span>; <span class="comment">//返回结果</span></span><br><span class="line">			&#125;</span><br><span class="line">		<span class="keyword">var</span> a = add();	</span><br><span class="line">		alert(a);</span><br><span class="line">		</span><br><span class="line">	<span class="comment">//add();//1.运行函数	 (网页加载完 ,直接运行)</span></span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="2，定义一个有参函数"><a href="#2，定义一个有参函数" class="headerlink" title="2，定义一个有参函数"></a>2，定义一个有参函数</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="comment">//定义一个有参函数 : 具有参数设定 ,让函数扩展性更强,能实现更灵活的功能(可以多次调用,分别执行不同的效果)</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//NaN = Not a Number 不是一个数字</span></span><br><span class="line">		</span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a,b,c</span>)</span>&#123;<span class="comment">//a ,b 就是函数 add 的参数 = &gt; &quot;形参&quot;</span></span><br><span class="line">			<span class="keyword">return</span> a + b + c;</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">		<span class="keyword">var</span> num = add(<span class="number">10</span>,<span class="number">20</span>);<span class="comment">//10 , 20 就是add方法在调用时的实际参数 = &gt; &quot;实参&quot;</span></span><br><span class="line">		<span class="keyword">var</span> num2 = add(<span class="number">1000</span>,<span class="number">15656565</span>);</span><br><span class="line">		</span><br><span class="line">		alert(num2);</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="3，变量提升"><a href="#3，变量提升" class="headerlink" title="3，变量提升"></a>3，变量提升</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	alert(a);<span class="comment">//A.报错(1.√)   B.undefined(2.√)  C.没有任何反应</span></span><br><span class="line">		</span><br><span class="line">		<span class="keyword">var</span> a = <span class="number">10</span>;</span><br><span class="line">		</span><br><span class="line">		<span class="comment">/*</span></span><br><span class="line"><span class="comment">			js怪异现象:</span></span><br><span class="line"><span class="comment">			在第10行运行时理论上应该是报错的 ,但是并没有 ,只是弹出undefined </span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			(变量提升)运行机制:</span></span><br><span class="line"><span class="comment">				其实在js在运行时, 首先会做一个预解析(将使用到的变量,函数创建),但是不会对其赋值 ,所以 在预解析阶段 a 并不会被赋予10 ,只有当代码运行到该位置时才会被赋值10</span></span><br><span class="line"><span class="comment">		**/</span></span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="4，变量作用域（全局变量-局部变量）"><a href="#4，变量作用域（全局变量-局部变量）" class="headerlink" title="4，变量作用域（全局变量    局部变量）"></a>4，变量作用域（全局变量    局部变量）</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="keyword">var</span> a = <span class="number">10</span>; <span class="comment">//全局变量 ,可以在当前页面任何位置使用的变量</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//局部变量:变量只能在该变量定义时所在代码块内部使用.</span></span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">hello</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="keyword">var</span> b = <span class="number">20</span>;<span class="comment">//局部变量:在某个代码块内部定义的变量</span></span><br><span class="line">			<span class="keyword">var</span> a = <span class="number">30</span>;</span><br><span class="line">			<span class="comment">//alert(a);//30 优先使用局部变量</span></span><br><span class="line">			alert(c);<span class="comment">//undefined</span></span><br><span class="line">			<span class="keyword">var</span> c = <span class="number">40</span>;	</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">		hello();</span><br><span class="line">		alert(a);</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h6 id="5，变量的怪异行为"><a href="#5，变量的怪异行为" class="headerlink" title="5，变量的怪异行为"></a>5，变量的怪异行为</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="function"><span class="keyword">function</span> <span class="title">ad</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		b = <span class="number">10</span>; <span class="comment">//此处b没有使用var 关键字声明 ,则被视为 全局变量</span></span><br><span class="line">	 &#125;</span><br><span class="line">		</span><br><span class="line">	ad();</span><br><span class="line">	</span><br><span class="line">	alert(b);</span><br><span class="line">	</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="6，生成指定范围的函数"><a href="#6，生成指定范围的函数" class="headerlink" title="6，生成指定范围的函数"></a>6，生成指定范围的函数</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="comment">//1.需求: 生成指定范围的整数  50 - 100 </span></span><br><span class="line">		<span class="comment">//0-10 =&gt; Math.random() * 10</span></span><br><span class="line">		<span class="comment">//0-50 =&gt; Math.random() * 50</span></span><br><span class="line">		<span class="comment">//50 -100 =&gt; Math.random()*50 + 50</span></span><br><span class="line">		</span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">randomNumber</span>(<span class="params">min,max</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="built_in">parseInt</span>(<span class="built_in">Math</span>.random()*(max - min + <span class="number">1</span>)) + min;	</span><br><span class="line">			&#125;</span><br><span class="line">    	</span><br><span class="line">		<span class="keyword">var</span> num = [];</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">10</span>;i++)&#123;</span><br><span class="line">			num.push(randomNumber(<span class="number">50</span>,<span class="number">100</span>));</span><br><span class="line">		   &#125;</span><br><span class="line">			</span><br><span class="line">		<span class="comment">//2.计算偶数之和</span></span><br><span class="line">		<span class="comment">//什么是偶数? 能够被2整除的数字就是偶数 = &gt; 对2求余 余数为0 ,表示能够被2整除</span></span><br><span class="line">		<span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;num.length;i++)&#123;</span><br><span class="line">			<span class="keyword">if</span>(num[i]%<span class="number">2</span>==<span class="number">0</span>)&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;偶数&#x27;</span>);</span><br><span class="line">				sum+=num[i];</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;奇数&#x27;</span>);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">				</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>





<h3 id="BOM操作-浏览器厂商提供的功能-用于操作浏览器窗口"><a href="#BOM操作-浏览器厂商提供的功能-用于操作浏览器窗口" class="headerlink" title="BOM操作:(浏览器厂商提供的功能,用于操作浏览器窗口)"></a>BOM操作:(浏览器厂商提供的功能,用于操作浏览器窗口)</h3><h6 id="1-window对象属性及其属性的方法"><a href="#1-window对象属性及其属性的方法" class="headerlink" title="1.window对象属性及其属性的方法"></a>1.window对象属性及其属性的方法</h6><p>一，history：返回用户的访问记录信息(历史记录)</p>
<p>​    其常用方法有（需要历史记录，即访问过）</p>
<p>​    back()加载history对象的前一个url<br>​    forward()加载history对象的后一个url<br>​    go(num)加载history对象的具体的url，num为加载的前后第num个页面</p>
<p>​        其示例代码如下有三个页面，可实现跳转，也可前进后退</p>
<p>a页面</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;h1&gt;这是a页面&lt;/h1&gt;</span><br><span class="line">    &lt;a href=<span class="string">&quot;b.html&quot;</span>&gt;访问b页面&lt;/a&gt;</span><br><span class="line">    &lt;button onclick=<span class="string">&quot;window.history.forward()&quot;</span>&gt;前进&lt;/button&gt;</span><br><span class="line">    &lt;button onclick=<span class="string">&quot;window.history.go(2)&quot;</span>&gt;前进<span class="number">2</span>&lt;/button&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>b页面</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;h1&gt;这是b页面&lt;/h1&gt;</span><br><span class="line"> &lt;a href=<span class="string">&quot;c.html&quot;</span>&gt;访问c页面&lt;/a&gt;</span><br><span class="line"> &lt;button onclick=<span class="string">&quot;window.history.back()&quot;</span>&gt;后退&lt;/button&gt;</span><br><span class="line"> &lt;button onclick=<span class="string">&quot;window.history.go(1)&quot;</span>&gt;前进&lt;/button&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>c页面</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Transitional&#x2F;&#x2F;EN&quot; &quot;http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;xhtml1&#x2F;DTD&#x2F;xhtml1-transitional.dtd&quot;&gt;</span><br><span class="line">&lt;html xmlns&#x3D;&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv&#x3D;&quot;Content-Type&quot; content&#x3D;&quot;text&#x2F;html; charset&#x3D;utf-8&quot; &#x2F;&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;h1&gt;这是c页面&lt;&#x2F;h1&gt;</span><br><span class="line">    &lt;button onclick&#x3D;&quot;window.history.go(-1)&quot;&gt;后退&lt;&#x2F;button&gt;</span><br><span class="line">    &lt;button onclick&#x3D;&quot;window.history.go(-2)&quot;&gt;后退2&lt;&#x2F;button&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>二，location：返回当前访问的url信息(当前url) </p>
<p>​    1.属性：<br>​        ①host：返回当前服务器主机地址（名称）=》<a target="_blank" rel="noopener" href="http://www.baidu.com,需要在服务器环境下使用/">www.baidu.com，需要在服务器环境下使用</a><br>​                alert(window.location.host);    =&gt;    <a target="_blank" rel="noopener" href="http://www.baidu.com/">www.baidu.com</a><br>​        ②hostname：与host相同或相似。<br>​        ③href：返回当前访问地址的完整url。<br>​                alert(location.href);    =&gt;    <a target="_blank" rel="noopener" href="http://www.baidu.com/">http://www.baidu.com</a></p>
<p>​    2.方法：<br>​        ①reload()重新加载当前文档（刷新）。<br>​                <button onclick="window.location.reload()">点击刷新</button><br>​        ②replace()用新的文档替换当前文档<br>​                &lt;button onclick=”window.location.replace(“<a target="_blank" rel="noopener" href="https://www.baidu.com&quot;)&quot;&gt;跳转到百度/">https://www.baidu.com&quot;)&quot;&gt;跳转到百度</a>                    </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;button onclick=<span class="string">&quot;window.location.reload()&quot;</span>&gt;刷新&lt;/button&gt;</span><br><span class="line">    &lt;button onclick=<span class="string">&quot;window.location.replace(&#x27;http://www.baidu.com&#x27;)&quot;</span>&gt;跳转&lt;/button&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="comment">//host : 返回当前服务器主机地址(名称) = &gt; www.baidu.com ,需要在服务器环境下使用</span></span><br><span class="line">		<span class="comment">//alert(location.host);</span></span><br><span class="line">			</span><br><span class="line">		<span class="comment">//hostname</span></span><br><span class="line">		<span class="comment">//alert(location.hostname);</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//href 返回当前访问地址的url</span></span><br><span class="line">		<span class="comment">//alert(location.href);</span></span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>三，screen：屏幕对象 = &gt; 包含屏幕的信息(尺寸 ,屏幕在分辨率(width/height) ，及可用宽高尺寸(availWidth / availHeight))</p>
<p>availWidth和availHeight（可用屏幕宽和可用屏幕高）<br>innerWidth和innerHeight（返回文档显示区的宽高）<br>outerWidth和outerHeight（包括文档显示区，工具与滚动条的宽高）</p>
<p>四，navgatior：对象包含有关浏览器的信息。(用于判断访问用户是用什么设备,什么浏览器访问)</p>
<p>会显示以下这些信息（作为了解）：</p>
<ol>
<li>appCodeName:”Mozilla”</li>
<li>appName:”Netscape”</li>
<li>appVersion:”5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36”</li>
<li>cookieEnabled:true</li>
<li>credentials:CredentialsContainer</li>
<li>doNotTrack:null</li>
<li>geolocation:Geolocation</li>
<li>hardwareConcurrency:4</li>
<li>language:”zh-CN”</li>
<li>languages:Array[3]</li>
<li>maxTouchPoints:0</li>
<li>mediaDevices:MediaDevices</li>
<li>mimeTypes:MimeTypeArray</li>
<li>onLine:true</li>
<li>permissions:Permissions</li>
<li>platform:”Win32”</li>
<li>plugins:PluginArray</li>
<li>presentation:Presentation</li>
<li>product:”Gecko”</li>
<li>productSub:”20030107”</li>
<li>serviceWorker:ServiceWorkerContainer</li>
<li>userAgent:”Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36”</li>
<li>vendor:”Google Inc.”</li>
<li>vendorSub:””</li>
<li>webkitPersistentStorage:DeprecatedStorageQuota</li>
<li>webkitTemporaryStorage:DeprecatedStorageQuota</li>
<li>proto:Navigator</li>
</ol>
<h6 id="2-定时器"><a href="#2-定时器" class="headerlink" title="2.定时器"></a>2.定时器</h6><p>​    ①.定时器函数的使用（setInterval和setTimeout）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="comment">/**</span></span><br><span class="line"><span class="comment">		window对象上的定时器函数:</span></span><br><span class="line"><span class="comment">			-setInterval()=&gt; 周期性定时器 (每隔指定时间执行一次)</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			-setTimeout() =&gt; 延时定时器  (执行一次)</span></span><br><span class="line"><span class="comment">		</span></span><br><span class="line"><span class="comment">			定时器单位: ms 计算    1s = 1000 ms</span></span><br><span class="line"><span class="comment">		**/</span>  </span><br><span class="line">		</span><br><span class="line">	<span class="comment">/*	1.setTimeout(function()&#123;</span></span><br><span class="line"><span class="comment">			alert(&#x27;3秒钟时间到了!&#x27;);</span></span><br><span class="line"><span class="comment">			&#125;,3000);*/</span></span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">doSth</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;时间到了!boom~~~~&#x27;</span>);</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">		<span class="comment">//2.setTimeout(doSth,3000);</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//3.setTimeout(&quot;doSth()&quot;,3000);</span></span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		<span class="built_in">setInterval</span>(doSth,<span class="number">3000</span>);</span><br><span class="line">			</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>​    ②.清除定时器（clearInterval和clearTimeout）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">		<span class="comment">// 注意: 如果使用的是setInterval() 设置 ,必须使用clearInterval() 清除</span></span><br><span class="line">		<span class="comment">//       setTimeout() 设置 ,必须使用clearTimeout() 清除</span></span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line">    	<span class="keyword">var</span> time = <span class="number">5</span>;</span><br><span class="line">		</span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">cutdown</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			time--;</span><br><span class="line">			<span class="keyword">if</span>(time&lt;=<span class="number">0</span>)&#123;</span><br><span class="line">				<span class="comment">//清除定时器</span></span><br><span class="line">				<span class="built_in">clearInterval</span>(timer);</span><br><span class="line">				&#125;</span><br><span class="line">			<span class="built_in">console</span>.log(time+<span class="string">&#x27;s&#x27;</span>);</span><br><span class="line">			&#125;</span><br><span class="line">    	</span><br><span class="line">		<span class="keyword">var</span> timer = <span class="built_in">setInterval</span>(cutdown,<span class="number">1000</span>); <span class="comment">//返回定时器的 ID</span></span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="3-Date内置对象"><a href="#3-Date内置对象" class="headerlink" title="3.Date内置对象"></a>3.Date内置对象</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="comment">//Date() 负责处理时间/日期</span></span><br><span class="line">		</span><br><span class="line">		<span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>(); <span class="comment">//创建日期对象</span></span><br><span class="line">		<span class="built_in">console</span>.log(date);</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">var</span> year = date.getFullYear(); <span class="comment">//获取四位数的年份</span></span><br><span class="line">		<span class="keyword">var</span> month = date.getMonth(); <span class="comment">//获取月份  0 - 11</span></span><br><span class="line">		<span class="keyword">var</span> day = date.getDate(); <span class="comment">//获取日期 1 - 31</span></span><br><span class="line">		<span class="keyword">var</span> week = date.getDay();<span class="comment">//获取星期  0 - 6 </span></span><br><span class="line">		</span><br><span class="line">		<span class="keyword">var</span> hours = date.getHours();<span class="comment">//获取小时 0 - 23</span></span><br><span class="line">		<span class="keyword">var</span> minutes = date.getMinutes();<span class="comment">//获取分 0 - 59 </span></span><br><span class="line">		<span class="keyword">var</span> seconds = date.getSeconds();<span class="comment">//获取秒 0 - 59 </span></span><br><span class="line">		<span class="keyword">var</span> ms = date.getMilliseconds();<span class="comment">//获取毫秒 0 - 999</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//时间戳(时间的唯一标识)  , 记录着从格林威治时间(GMT)1970年1月1日0时0分0秒0毫秒 累计到当前的总的毫秒数</span></span><br><span class="line">	</span><br><span class="line">		<span class="keyword">var</span> timestamp = date.getTime();</span><br><span class="line">		<span class="comment">//alert(timestamp);</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//1562982204883 </span></span><br><span class="line">		<span class="keyword">var</span> date2 = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">1562982204883</span>);</span><br><span class="line">			<span class="keyword">var</span> m = date2.getMinutes();</span><br><span class="line">			<span class="comment">//alert(m);</span></span><br><span class="line">			</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">var</span> date3 = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">&quot;2014-8-5&quot;</span>);</span><br><span class="line">			<span class="keyword">var</span> week2 = date3.getDay();</span><br><span class="line">			<span class="keyword">var</span> ts = date3.getTime();</span><br><span class="line">			alert(ts);	<span class="comment">// 2 </span></span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="利用定时器和Date制作的动态时钟案例"><a href="#利用定时器和Date制作的动态时钟案例" class="headerlink" title="利用定时器和Date制作的动态时钟案例"></a>利用定时器和Date制作的动态时钟案例</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">	&lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">	&lt;title&gt;测试&lt;/title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        .container&#123;</span><br><span class="line">            width: 500px;</span><br><span class="line">            height: 200px;</span><br><span class="line">            margin:50px auto;</span><br><span class="line">            border:1px solid #ccc;</span><br><span class="line">            border-radius:10px;</span><br><span class="line">            background:#eee;</span><br><span class="line">            font-weight: bold;</span><br><span class="line">            font-family:<span class="string">&quot;microsoft Yahei&quot;</span>;</span><br><span class="line">            text-align: center;</span><br><span class="line">        &#125;</span><br><span class="line">        #dateBox&#123;</span><br><span class="line">            width: 500px;</span><br><span class="line">            height:50px;</span><br><span class="line">            font-size:25px;</span><br><span class="line">            margin-top:30px;</span><br><span class="line">        &#125;</span><br><span class="line">        #timeBox&#123;</span><br><span class="line">            font-size:60px;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;container&quot;</span> id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line">        &lt;div id=<span class="string">&quot;dateBox&quot;</span>&gt;<span class="number">2018</span>年<span class="number">8</span>月<span class="number">8</span>日 星期六&lt;/div&gt;</span><br><span class="line">        &lt;div id=<span class="string">&quot;timeBox&quot;</span>&gt;<span class="number">12</span>:<span class="number">50</span>:<span class="number">32</span>&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        <span class="keyword">var</span> app=<span class="built_in">document</span>.getElementById(<span class="string">&quot;app&quot;</span>);</span><br><span class="line">        <span class="keyword">var</span> weeks=[<span class="string">&#x27;星期天&#x27;</span>,<span class="string">&#x27;星期一&#x27;</span>,<span class="string">&#x27;星期二&#x27;</span>,<span class="string">&#x27;星期三&#x27;</span>,<span class="string">&#x27;星期四&#x27;</span>,<span class="string">&#x27;星期五&#x27;</span>,<span class="string">&#x27;星期六&#x27;</span>]</span><br><span class="line">        <span class="function"><span class="keyword">function</span> <span class="title">createTime</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="comment">//获取最新时间</span></span><br><span class="line">            <span class="keyword">var</span> appTime=<span class="string">&#x27;&#x27;</span>;</span><br><span class="line">            <span class="keyword">var</span> date=<span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">            <span class="keyword">var</span> y=date.getFullYear();</span><br><span class="line">            <span class="keyword">var</span> m=date.getMonth();</span><br><span class="line">            <span class="keyword">var</span> d=date.getDate();</span><br><span class="line">            <span class="keyword">var</span> w=date.getDay();</span><br><span class="line">            <span class="keyword">var</span> h=date.getHours();</span><br><span class="line">            <span class="keyword">var</span> i=date.getMinutes();</span><br><span class="line">            <span class="keyword">var</span> s=date.getSeconds();</span><br><span class="line"></span><br><span class="line">            <span class="comment">//输出时间</span></span><br><span class="line">            appTime+=<span class="string">&#x27;&lt;div id=&quot;dateBox&quot;&gt;&#x27;</span>+y+<span class="string">&#x27;年&#x27;</span>+(m+<span class="number">1</span>)+<span class="string">&#x27;月&#x27;</span>+d+<span class="string">&#x27;日&#x27;</span>+weeks[w]+<span class="string">&#x27;&lt;/div&gt;&#x27;</span>;</span><br><span class="line">            h=h&lt;<span class="number">10</span>?<span class="string">&#x27;0&#x27;</span>+h:h;</span><br><span class="line">            i=i&lt;<span class="number">10</span>?<span class="string">&#x27;0&#x27;</span>+i:i;</span><br><span class="line">            s=s&lt;<span class="number">10</span>?<span class="string">&#x27;0&#x27;</span>+s:s;</span><br><span class="line">            appTime+=<span class="string">&#x27;&lt;div id=&quot;timeBox&quot;&gt;&#x27;</span>+h+<span class="string">&#x27;:&#x27;</span>+i+<span class="string">&#x27;:&#x27;</span>+s+<span class="string">&#x27;&lt;/div&gt;&#x27;</span>;</span><br><span class="line">            app.innerHTML=appTime;</span><br><span class="line">            <span class="built_in">setTimeout</span>(createTime,<span class="number">1000</span>)</span><br><span class="line">        &#125;</span><br><span class="line">        createTime();</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<h6 id="利用定时器Date内置对象（相比动态时钟多用了格林威治事件即时间戳）制作的国庆倒计时案例"><a href="#利用定时器Date内置对象（相比动态时钟多用了格林威治事件即时间戳）制作的国庆倒计时案例" class="headerlink" title="利用定时器Date内置对象（相比动态时钟多用了格林威治事件即时间戳）制作的国庆倒计时案例"></a>利用定时器Date内置对象（相比动态时钟多用了格林威治事件即时间戳）制作的国庆倒计时案例</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">    &lt;meta name=<span class="string">&quot;viewport&quot;</span> content=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br><span class="line">    &lt;meta http-equiv=<span class="string">&quot;X-UA-Compatible&quot;</span> content=<span class="string">&quot;ie=edge&quot;</span>&gt;</span><br><span class="line">    &lt;title&gt;国庆倒计时&lt;/title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        .container&#123;</span><br><span class="line">            height: 500px;</span><br><span class="line">            font-size: 100px;</span><br><span class="line">            background:#ff3c3c;</span><br><span class="line">            color:#fff;</span><br><span class="line">            font-weight: bold;</span><br><span class="line">            font-family: <span class="string">&quot;Microsoft Yahei&quot;</span>;</span><br><span class="line">            text-align: center;</span><br><span class="line">        &#125;</span><br><span class="line">        .font&#123;</span><br><span class="line">            letter-spacing: 50px;</span><br><span class="line">            line-height: 180px;</span><br><span class="line">        &#125;</span><br><span class="line">        #national&#123;</span><br><span class="line">            line-height: 300px;</span><br><span class="line">            letter-spacing: 25px;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;container&quot;</span> id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line">        &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;font&quot;</span>&gt;距离国庆还有&lt;/div&gt;</span><br><span class="line">        &lt;div id=<span class="string">&quot;national&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">            <span class="keyword">var</span> national=<span class="built_in">document</span>.getElementById(<span class="string">&quot;app&quot;</span>);</span><br><span class="line">            </span><br><span class="line">        <span class="function"><span class="keyword">function</span> <span class="title">createTime</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">var</span> appTime=<span class="string">&#x27;&#x27;</span>;</span><br><span class="line">            <span class="comment">//获取国庆节的时间戳（格林威治时间）</span></span><br><span class="line">            <span class="keyword">var</span> nation=<span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">&quot;2019-10-1&quot;</span>);</span><br><span class="line">            <span class="keyword">var</span> nationtime=nation.getTime();</span><br><span class="line">            <span class="comment">//获取当前时间戳（格林威治时间）</span></span><br><span class="line">            <span class="keyword">var</span> date=<span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">            <span class="keyword">var</span> nowtimestamp=date.getTime();</span><br><span class="line">            <span class="keyword">var</span> timestamp=nationtime-nowtimestamp;</span><br><span class="line">            <span class="keyword">var</span> d=<span class="built_in">parseInt</span>(timestamp/(<span class="number">1000</span>*<span class="number">60</span>*<span class="number">60</span>*<span class="number">24</span>));</span><br><span class="line">            <span class="keyword">var</span> h=<span class="built_in">parseInt</span>(timestamp/(<span class="number">1000</span>*<span class="number">60</span>*<span class="number">60</span>)%<span class="number">24</span>);</span><br><span class="line">            <span class="keyword">var</span> i=<span class="built_in">parseInt</span>(timestamp/(<span class="number">1000</span>*<span class="number">60</span>)%<span class="number">60</span>);</span><br><span class="line">            <span class="keyword">var</span> s=<span class="built_in">parseInt</span>(timestamp/<span class="number">1000</span>%<span class="number">60</span>);</span><br><span class="line">                h=h&lt;<span class="number">10</span>?<span class="string">&#x27;0&#x27;</span>+h:h;</span><br><span class="line">                i=i&lt;<span class="number">10</span>?<span class="string">&#x27;0&#x27;</span>+i:i;</span><br><span class="line">                s=s&lt;<span class="number">10</span>?<span class="string">&#x27;0&#x27;</span>+s:s;</span><br><span class="line">            appTime+=<span class="string">&#x27;&lt;div class=&quot;font&quot;&gt;&#x27;</span>+<span class="string">&#x27;距离国庆还有&#x27;</span>+<span class="string">&#x27;&lt;/div&gt;&#x27;</span>;</span><br><span class="line">            appTime+=<span class="string">&#x27;&lt;div id=&quot;national&quot;&gt;&#x27;</span>+d+<span class="string">&#x27;天&#x27;</span>+h+<span class="string">&#x27;时&#x27;</span>+i+<span class="string">&#x27;分&#x27;</span>+s+<span class="string">&#x27;秒&#x27;</span>+<span class="string">&#x27;&lt;/div&gt;&#x27;</span>;</span><br><span class="line">            app.innerHTML=appTime;</span><br><span class="line">            <span class="built_in">setTimeout</span>(createTime,<span class="number">1000</span>);</span><br><span class="line">        &#125;</span><br><span class="line">        createTime();</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<h6 id="4-Math内置对象"><a href="#4-Math内置对象" class="headerlink" title="4.Math内置对象"></a>4.Math内置对象</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">	&lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">	&lt;title&gt;测试&lt;/title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        .container&#123;</span><br><span class="line">            width: 500px;</span><br><span class="line">            height: 200px;</span><br><span class="line">            margin:50px auto;</span><br><span class="line">            border:1px solid #ccc;</span><br><span class="line">            border-radius:10px;</span><br><span class="line">            background:#eee;</span><br><span class="line">            font-weight: bold;</span><br><span class="line">            font-family:<span class="string">&quot;microsoft Yahei&quot;</span>;</span><br><span class="line">            text-align: center;</span><br><span class="line">        &#125;</span><br><span class="line">        #dateBox&#123;</span><br><span class="line">            width: 500px;</span><br><span class="line">            height:50px;</span><br><span class="line">            font-size:25px;</span><br><span class="line">            margin-top:30px;</span><br><span class="line">        &#125;</span><br><span class="line">        #timeBox&#123;</span><br><span class="line">            font-size:60px;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        <span class="comment">//Math内置对象</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.abs(-<span class="number">3</span>));<span class="comment">//绝对值计算</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.random()*<span class="number">10</span>);<span class="comment">//取自己设置的区间的随机数</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.round(<span class="number">1.35</span>));<span class="comment">//四舍五入取整数</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.pow(<span class="number">0.5904</span>,<span class="number">0.5</span>));<span class="comment">//计算x的y次幂</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.max(<span class="number">5</span>,<span class="number">2</span>,<span class="number">85</span>,<span class="number">65</span>,<span class="number">7</span>,<span class="number">6</span>,<span class="number">3</span>));<span class="comment">//取该数组的最大数</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.min(<span class="number">5</span>,<span class="number">8</span>,<span class="number">9</span>,<span class="number">52</span>,<span class="number">63</span>,<span class="number">41</span>,<span class="number">98</span>,<span class="number">79</span>,<span class="number">2</span>,<span class="number">3</span>));<span class="comment">//取该数组的最小数</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.floor(<span class="number">100.9999</span>));<span class="comment">//向上取整，取最大</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.ceil(<span class="number">10.1</span>));<span class="comment">//向下取整，取最小</span></span><br><span class="line">        <span class="comment">//Math内置对象之三角函数</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.sin(<span class="built_in">Math</span>.PI/<span class="number">180</span>*<span class="number">45</span>));<span class="comment">//求正弦sin45°的值</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.cos(<span class="built_in">Math</span>.PI/<span class="number">180</span>*<span class="number">45</span>));<span class="comment">//求余弦cos45°的值</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.tan(<span class="built_in">Math</span>.PI/<span class="number">180</span>*<span class="number">45</span>));<span class="comment">//求正切tan45°的值</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">Math</span>.atan(<span class="number">1</span>)*<span class="number">180</span>/<span class="built_in">Math</span>.PI);<span class="comment">//已知正切值，求角度</span></span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<h6 id="5-document文档对象"><a href="#5-document文档对象" class="headerlink" title="5.document文档对象"></a>5.document文档对象</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="comment">//document.write(&#x27;哈哈啊&#x27;);</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//referrer  需要在服务器环境下使用 , 返回当前文档的来源地址</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//alert(document.referrer);</span></span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//URL 返回当前文档的URL地址 </span></span><br><span class="line">		</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="6-URL的组成部分"><a href="#6-URL的组成部分" class="headerlink" title="6.URL的组成部分"></a>6.URL的组成部分</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="comment">/**</span></span><br><span class="line"><span class="comment">		 https://www.baidu.com:80/abc/index.html?name=张三&amp;age=20  =&gt; URL</span></span><br><span class="line"><span class="comment">		 </span></span><br><span class="line"><span class="comment">		 应用协议:</span></span><br><span class="line"><span class="comment">		 1.https://  = &gt; 协议 , 安全类型的http 协议 / web请求的协议</span></span><br><span class="line"><span class="comment">		   http://   =&gt; 协议 超文本传输协议(主要应用在web服务器进行数据传输的规范协议)</span></span><br><span class="line"><span class="comment">		 </span></span><br><span class="line"><span class="comment">		 		发邮件:SMTP , POP3</span></span><br><span class="line"><span class="comment">		 		文件传输:FTP ,SFTP</span></span><br><span class="line"><span class="comment">		 </span></span><br><span class="line"><span class="comment">		 2.www.baidu.com = &gt; 主机名(网址,域名)</span></span><br><span class="line"><span class="comment">		 		www(mp3/ tieba / baike) =&gt; 二级域名</span></span><br><span class="line"><span class="comment">				baidu.com =&gt;主域名</span></span><br><span class="line"><span class="comment">					.com =&gt;顶级域名(国际)</span></span><br><span class="line"><span class="comment">					.cn(中国)</span></span><br><span class="line"><span class="comment">					.tw(台湾)</span></span><br><span class="line"><span class="comment">					.hk(香港)</span></span><br><span class="line"><span class="comment">					.jp(日本)</span></span><br><span class="line"><span class="comment">					.us(美国)</span></span><br><span class="line"><span class="comment">					.uk(英国)</span></span><br><span class="line"><span class="comment">					...</span></span><br><span class="line"><span class="comment">		 </span></span><br><span class="line"><span class="comment">		 3.端口 (设备与外界通讯交流的出口), 用于标识服务器(设备)上对应服务</span></span><br><span class="line"><span class="comment">		 	web服务,默认一般是80 ,所以浏览器中不显示</span></span><br><span class="line"><span class="comment">			如果是https协议 就是 443端口</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">		 (在一台服务器(www.baidu.com)上,可能有web网站服务,smtp邮件服务,ftp文件服务)</span></span><br><span class="line"><span class="comment">		  </span></span><br><span class="line"><span class="comment">		  </span></span><br><span class="line"><span class="comment">		 4. 文件目录及文件名 =&gt; abc/index.html</span></span><br><span class="line"><span class="comment">		 </span></span><br><span class="line"><span class="comment">		  </span></span><br><span class="line"><span class="comment">		 5. 查询字符串(QueryString),作用:传输给服务器的数据</span></span><br><span class="line"><span class="comment">		 </span></span><br><span class="line"><span class="comment">		 **/</span></span><br><span class="line">    	</span><br><span class="line">    </span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h3 id="DOM操作-w3c-DOM操作"><a href="#DOM操作-w3c-DOM操作" class="headerlink" title="DOM操作(w3c DOM操作)"></a>DOM操作(w3c DOM操作)</h3><p>网页文档  - &gt; document对象</p>
<h5 id="查：在进行一切的DOM操作时（增-删-改-查）"><a href="#查：在进行一切的DOM操作时（增-删-改-查）" class="headerlink" title="查：在进行一切的DOM操作时（增/删/改/查）"></a>查：在进行一切的DOM操作时（增/删/改/查）</h5><p>​    获取网页元素/标签对象（DOM对象）的方式：</p>
<p>1，通过ID属性获取：document.getElementById(“id元素”);</p>
<p>2，通过标签名称获取：document.getElementsByTagName(“标签元素”);</p>
<p>3，通过元素name属性值获取：document.getElementsByName(“name元素”);</p>
<p>4，通过类名（class）属性获取：document.getElementsClassName(“类（class）元素”);</p>
<p>示例代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;button onclick=<span class="string">&quot;getAttr()&quot;</span>&gt;获取图片路径&lt;/button&gt;</span><br><span class="line">    &lt;button onclick=<span class="string">&quot;setAttr()&quot;</span>&gt;设置新图片&lt;/button&gt;</span><br><span class="line">    &lt;button onclick=<span class="string">&quot;removeAttr()&quot;</span>&gt;删除图片路径&lt;/button&gt;</span><br><span class="line">	&lt;img id=<span class="string">&quot;img&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;abc&quot;</span> title=<span class="string">&quot;title哈啊哈哈哈&quot;</span> alt=<span class="string">&quot;sadadadad&quot;</span> hehe=<span class="string">&quot;哈哈啊哈哈&quot;</span> src=<span class="string">&quot;images/fruit.jpg&quot;</span>/&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">    	<span class="keyword">var</span> img = <span class="built_in">document</span>.getElementById(<span class="string">&quot;img&quot;</span>);</span><br><span class="line">		</span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">getAttr</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">//获取DOM对象的属性 getAttribute(属性名) 可以获取任何属性</span></span><br><span class="line">			alert(img.getAttribute(<span class="string">&quot;src&quot;</span>));</span><br><span class="line">			&#125;	</span><br><span class="line">			</span><br><span class="line">		</span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">setAttr</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">//设置DOM的属性及属性值 setAttribute(属性名,属性值) 可以设置任何属性</span></span><br><span class="line">			img.setAttribute(<span class="string">&quot;src&quot;</span>,<span class="string">&quot;images/grape.jpg&quot;</span>);</span><br><span class="line">			</span><br><span class="line">			<span class="comment">//img.setAttribute(&#x27;ggggg&#x27;,&#x27;99999999&#x27;);</span></span><br><span class="line">			&#125;</span><br><span class="line">		</span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">removeAttr</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">//删除指定的属性 removeAttribute(需要删除的属性名)</span></span><br><span class="line">			img.removeAttribute(<span class="string">&quot;src&quot;</span>);</span><br><span class="line">			&#125;		</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<p>5，根据DOM树的节点关系查找元素：</p>
<p>​    获取 html document.documentElement；</p>
<p>​    获取 body document.body；</p>
<p>​    获取 head document.head；</p>
<p>​    获取 title document.title；</p>
<p>​    document.title=”我开心”；（改变html文档标题）</p>
<p>​    根据元素的层级关系，查找对应的元素：</p>
<p>​    注意：节点分为   1.元素  2.属性  3.文本节点（多数表现为空格，换行和文本）</p>
<p>​    ①父级</p>
<p>​        一个元素的父级元素只有一个，所以只有一个方法查找</p>
<p>​        parentNode（父辈级）返回当前元素的父级元素节点（只会返回元素节点）；</p>
<p>​    ②兄弟</p>
<p>​        previousSibling返回当前元素的前一个兄弟（同胞）元素（文本或元素节点）；</p>
<p>​        previousElementSibling返回当前元素的前一个兄弟（同胞）元素（只能是元素节点）；</p>
<p>​        nextSibling返回当前元素的下一个兄弟（同胞）元素（文本或元素节点）；</p>
<p>​        nextElementSibling返回当前元素的下一个兄弟（同胞）元素（只能是元素节点）；</p>
<p>​    ③子元素</p>
<p>​        firstChild返回当前元素的第一个子节点（可以是文本或属性）；</p>
<p>​        firstElementChild返回当前的第一个子节点（只能是返回元素节点）；</p>
<p>​        childNodes返回当前元素的所有的子节点集合（文本，元素）；</p>
<p>​        children返回当前元素的所有的子元素集合（只能返回元素节点）；</p>
<p>示例代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;div id=<span class="string">&quot;box&quot;</span>&gt;</span><br><span class="line">        &lt;span&gt;第一个子元素span&lt;/span&gt;</span><br><span class="line">    	&lt;p id=<span class="string">&quot;p1&quot;</span>&gt;第二个子元素p&lt;/p&gt;	</span><br><span class="line">        &lt;div&gt;第三个子元素div&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    </span><br><span class="line">    &lt;script&gt;</span><br><span class="line">    	<span class="comment">// html = &gt; document.documentElement</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//body =&gt;  document.body</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//head =&gt; document.head</span></span><br><span class="line">		<span class="comment">//console.log(document.head);</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//title = &gt; document.head.title</span></span><br><span class="line">		<span class="comment">//console.log(document.title=&#x27;我开心就好!&#x27;); </span></span><br><span class="line">		</span><br><span class="line">		<span class="keyword">var</span> box = <span class="built_in">document</span>.getElementById(<span class="string">&quot;box&quot;</span>);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">/*</span></span><br><span class="line"><span class="comment">			注意:节点分: 1.元素  2.属性 3.文本节点(多数表现为空格,换行,及文本内容)</span></span><br><span class="line"><span class="comment">				</span></span><br><span class="line"><span class="comment">			根据元素的层级关系 查找对应的元素:</span></span><br><span class="line"><span class="comment">				1.父辈 : parentNode 返回当前元素的父级元素节点</span></span><br><span class="line"><span class="comment">					</span></span><br><span class="line"><span class="comment">				</span></span><br><span class="line"><span class="comment">				2.兄弟 :</span></span><br><span class="line"><span class="comment">					1)previousSibling 返回当前元素的前面一个同胞元素 (文本 或者 元素节点)</span></span><br><span class="line"><span class="comment">					2)previousElementSibling 返回当前元素的前一个同胞元素</span></span><br><span class="line"><span class="comment">					</span></span><br><span class="line"><span class="comment">					3)nextSibling 返回当前元素的下一个同胞元素(文本 或者元素节点)</span></span><br><span class="line"><span class="comment">					4)nextElementSibling 返回当前元素的下一个同胞</span></span><br><span class="line"><span class="comment">					</span></span><br><span class="line"><span class="comment">				</span></span><br><span class="line"><span class="comment">				3.子元素</span></span><br><span class="line"><span class="comment">					1)firstChild  返回当前元素的第一个子节点 (可能是文本节点或者元素节点)</span></span><br><span class="line"><span class="comment">					2)firstElementChild	返回当前元素的第一个子元素 (只返回元素节点)</span></span><br><span class="line"><span class="comment">					</span></span><br><span class="line"><span class="comment">					3)lastChild  返回最后一个子节点</span></span><br><span class="line"><span class="comment">					4)lastElementChild  返回最后一个子元素节点</span></span><br><span class="line"><span class="comment">				</span></span><br><span class="line"><span class="comment">				</span></span><br><span class="line"><span class="comment">				childNodes 返回当前元素的所有子节点集合(文本 / 元素)</span></span><br><span class="line"><span class="comment">				children 返回当前元素所有的子元素</span></span><br><span class="line"><span class="comment">				</span></span><br><span class="line"><span class="comment">				nodeType 返回节点类型 :</span></span><br><span class="line"><span class="comment">						1 元素节点</span></span><br><span class="line"><span class="comment">						3 文本节点</span></span><br><span class="line"><span class="comment">						9 文档</span></span><br><span class="line"><span class="comment">						8 注释</span></span><br><span class="line"><span class="comment">					</span></span><br><span class="line"><span class="comment">		*/</span></span><br><span class="line">		<span class="comment">//console.log(box.lastChild);</span></span><br><span class="line">		<span class="keyword">var</span> p1 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;p1&quot;</span>);</span><br><span class="line">		</span><br><span class="line">			</span><br><span class="line">			</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h5 id="增"><a href="#增" class="headerlink" title="增"></a>增</h5><p>1，var a = document.createElement(“a”);创建一个新的空对象元素</p>
<p>2，a.href=”<a target="_blank" rel="noopener" href="http://imooc.con&quot;/">http://imooc.con&quot;</a> a.innerHTML=”go to imooc”;     或    a.setAttribute(“class”,”picture”)设置关键</p>
<p>属性</p>
<p>3，再可以将此标签对象元素添加到指定的父级元素之下</p>
<p>​    获取的父级元素.appendChild(“a”)</p>
<p>示例代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">	*&#123;</span><br><span class="line">		padding:<span class="number">0</span>;</span><br><span class="line">		margin:<span class="number">0</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	div&#123;</span><br><span class="line">		width:100px;</span><br><span class="line">		height:100px;</span><br><span class="line">		float:left;</span><br><span class="line">		&#125;	</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> r = <span class="number">0</span>;r&lt;<span class="number">256</span>;r++)&#123;</span><br><span class="line">			<span class="keyword">for</span>(<span class="keyword">var</span> g =<span class="number">0</span>;g&lt;<span class="number">1</span>;g++)&#123;</span><br><span class="line">				<span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">					div.style.background=<span class="string">&#x27;rgb(&#x27;</span>+r+<span class="string">&#x27;,&#x27;</span>+g+<span class="string">&#x27;,&#x27;</span>+<span class="number">255</span>+<span class="string">&#x27;)&#x27;</span>;</span><br><span class="line">					<span class="built_in">document</span>.body.appendChild(div);</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">    	<span class="comment">/*var div = document.createElement(&quot;div&quot;); //创建在内存中 = &gt; &lt;div&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="comment">			div.setAttribute(&#x27;class&#x27;,&#x27;box&#x27;);</span></span><br><span class="line"><span class="comment">			div.innerHTML = &#x27;这是新增的div&#x27;;</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			//将新增的网页元素插入到body中</span></span><br><span class="line"><span class="comment">			document.body.appendChild(div);</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			注意:只要是元素的新增或者删除之类的操作,一定是要从父节点下手</span></span><br><span class="line"><span class="comment">			*/</span></span><br><span class="line">			</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">   &lt;!-- body末尾处 , 结束标签之前--&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h5 id="删"><a href="#删" class="headerlink" title="删"></a>删</h5><p>removeChild()    删除这个元素的子元素；</p>
<p>示例代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">	#container&#123;</span><br><span class="line">		width:800px;</span><br><span class="line">		height:600px;</span><br><span class="line">		margin:50px auto;</span><br><span class="line">		border:1px solid #ccc;</span><br><span class="line">		&#125;	</span><br><span class="line">	</span><br><span class="line">	 .box&#123;</span><br><span class="line">		 width:200px;</span><br><span class="line">		 height:200px;</span><br><span class="line">		 font-size:30px;</span><br><span class="line">		 color:#fff;</span><br><span class="line">		 line-height:200px;</span><br><span class="line">		 background-color:red;</span><br><span class="line">		 </span><br><span class="line">		 &#125;	</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;button onclick=<span class="string">&quot;remove()&quot;</span>&gt;删除&lt;/button&gt;</span><br><span class="line">	&lt;div id=<span class="string">&quot;container&quot;</span>&gt;</span><br><span class="line">    	&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;box&quot;</span>&gt;教育改变生活!&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">    	<span class="function"><span class="keyword">function</span> <span class="title">remove</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="keyword">var</span> box = container.firstElementChild;</span><br><span class="line">			<span class="comment">//删除子元素</span></span><br><span class="line">			 container.removeChild(box);	</span><br><span class="line">			  <span class="comment">//container.removeChild(box);	</span></span><br><span class="line">			 <span class="comment">//container.innerHTML=&quot;&quot;;</span></span><br><span class="line">			&#125;</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h5 id="改"><a href="#改" class="headerlink" title="改"></a>改</h5><p>replaceChild(新元素，被替换的元素);</p>
<p>示例代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">	#container&#123;</span><br><span class="line">		width:800px;</span><br><span class="line">		height:600px;</span><br><span class="line">		margin:50px auto;</span><br><span class="line">		border:1px solid #ccc;</span><br><span class="line">		&#125;	</span><br><span class="line">	</span><br><span class="line">	 .box&#123;</span><br><span class="line">		 width:200px;</span><br><span class="line">		 height:200px;</span><br><span class="line">		 font-size:30px;</span><br><span class="line">		 color:#fff;</span><br><span class="line">		 line-height:200px;</span><br><span class="line">		 background-color:red;</span><br><span class="line">		 </span><br><span class="line">		 &#125;	</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;button onclick=<span class="string">&quot;remove()&quot;</span>&gt;替换&lt;/button&gt;</span><br><span class="line">	&lt;div id=<span class="string">&quot;container&quot;</span>&gt;</span><br><span class="line">    	&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;box&quot;</span>&gt;教育改变生活!&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">    	<span class="function"><span class="keyword">function</span> <span class="title">remove</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="keyword">var</span> box = container.firstElementChild;</span><br><span class="line">			<span class="comment">//替换</span></span><br><span class="line">			<span class="keyword">var</span> img = <span class="built_in">document</span>.createElement(<span class="string">&quot;img&quot;</span>);</span><br><span class="line">				img.src=<span class="string">&quot;images/grape.jpg&quot;</span>;</span><br><span class="line">				</span><br><span class="line">		 <span class="comment">//replaceChild(新元素,被替换的元素)	</span></span><br><span class="line">			container.replaceChild(img,box);	</span><br><span class="line">			&#125;</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>修改元素样式setAttribute(“class”,”box”)    box.style.color=”#fff”;        box.style.cssText=”background:red;”</p>
<p>示例代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">	#container&#123;</span><br><span class="line">		width:800px;</span><br><span class="line">		height:600px;</span><br><span class="line">		margin:50px auto;</span><br><span class="line">		border:1px solid #ccc;</span><br><span class="line">		&#125;	</span><br><span class="line">	</span><br><span class="line">	 .box&#123;</span><br><span class="line">		 width:200px;</span><br><span class="line">		 height:200px;</span><br><span class="line">		 &#125;	</span><br><span class="line">		 </span><br><span class="line">	 .on&#123;	 </span><br><span class="line">		 background:red;</span><br><span class="line">		 color:#fff;</span><br><span class="line">		 font-size:24px;</span><br><span class="line">		 text-align:center;</span><br><span class="line">		 &#125;	 </span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;button onclick=<span class="string">&quot;setStyle()&quot;</span>&gt;设置样式&lt;/button&gt;</span><br><span class="line">	&lt;div id=<span class="string">&quot;container&quot;</span>&gt;</span><br><span class="line">    	&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;box&quot;</span>&gt;教育改变生活!&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">		<span class="comment">//设置DOM对象的样式 (行内样式)</span></span><br><span class="line">    	<span class="function"><span class="keyword">function</span> <span class="title">setStyle</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="keyword">var</span> box = container.firstElementChild;</span><br><span class="line">			</span><br><span class="line">				<span class="comment">/*box.style.background=&quot;red&quot;;</span></span><br><span class="line"><span class="comment">				box.style.color=&quot;#fff&quot;;</span></span><br><span class="line"><span class="comment">				box.style.fontSize=&quot;26px&quot;;</span></span><br><span class="line"><span class="comment">				box.style.lineHeight=&quot;200px&quot;;*/</span></span><br><span class="line">				</span><br><span class="line">				<span class="comment">//使用css方式</span></span><br><span class="line">				<span class="comment">//box.style.cssText=&quot;background:red;color:#fff;font-size:24px;&quot;</span></span><br><span class="line">				</span><br><span class="line">				box.setAttribute(<span class="string">&#x27;class&#x27;</span>,<span class="string">&quot;box on&quot;</span>);</span><br><span class="line">			&#125;</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h5 id="DOM事件"><a href="#DOM事件" class="headerlink" title="DOM事件"></a>DOM事件</h5><h6 id="事件分类"><a href="#事件分类" class="headerlink" title="事件分类"></a>事件分类</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>HTML DOM 允许 JavaScript 对 HTML 事件作出反应：<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">h3</span>&gt;</span>DOM事件分类:<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">p</span>&gt;</span>1.鼠标事件<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>2.键盘事件<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>3.表单事件<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>4.窗口事件<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>5.其他事件<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h6 id="鼠标事件"><a href="#鼠标事件" class="headerlink" title="鼠标事件"></a>鼠标事件</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">	<span class="selector-id">#box</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">width</span><span class="selector-pseudo">:400px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">height</span><span class="selector-pseudo">:400px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">background-color</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">margin</span><span class="selector-pseudo">:50px</span> <span class="selector-tag">auto</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">border</span><span class="selector-pseudo">:1px</span> <span class="selector-tag">solid</span> <span class="selector-id">#ccc</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line">	</span><br><span class="line"><span class="css">	<span class="selector-class">.box</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">width</span><span class="selector-pseudo">:200px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">height</span><span class="selector-pseudo">:200px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">background-color</span><span class="selector-pseudo">:green</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">margin</span><span class="selector-pseudo">:100px</span> <span class="selector-tag">auto</span>;</span></span><br><span class="line">		</span><br><span class="line">		&#125;	</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    	<span class="keyword">var</span> box = <span class="built_in">document</span>.getElementById(<span class="string">&quot;box&quot;</span>);</span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//1.单击事件 - &gt; onclick = &gt;click</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//2.双击事件 = &gt; ondblclick </span></span></span><br><span class="line"><span class="javascript">		box.ondblclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;双击事件!&#x27;</span>);</span></span><br><span class="line">			&#125;</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//3.鼠标按下事件 =&gt;  onmousedown 	</span></span></span><br><span class="line"><span class="javascript">		box.onmousedown = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;鼠标按下事件!&#x27;</span>);</span></span><br><span class="line">			&#125;</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//4.鼠标起来事件 =&gt; onmouseup</span></span></span><br><span class="line"><span class="javascript">		box.onmouseup = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;鼠标起来事件!&#x27;</span>);</span></span><br><span class="line">			&#125;</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//5.鼠标悬停事件 = &gt; onmouseover</span></span></span><br><span class="line"><span class="javascript">		box.onmouseover = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//console.log(&#x27;鼠标悬停事件!&#x27;);</span></span></span><br><span class="line">			&#125;</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//6.鼠标移出事件 = &gt; onmouseout</span></span></span><br><span class="line"><span class="javascript">		box.onmouseout = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//console.log(&#x27;鼠标移出事件!&#x27;);</span></span></span><br><span class="line">			&#125;	</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//7.鼠标移动事件 =&gt; onmousemove</span></span></span><br><span class="line"><span class="javascript">		box.onmousemove = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//console.log(&#x27;鼠标移动事件!&#x27;);</span></span></span><br><span class="line">			&#125;	</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//8.鼠标进入事件 = &gt;onmouseenter</span></span></span><br><span class="line"><span class="javascript">			box.onmouseenter = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;鼠标移动enter事件!&#x27;</span>);</span></span><br><span class="line">			&#125;	</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//9.鼠标离开事件 = &gt;onmouseleave</span></span></span><br><span class="line"><span class="javascript">		box.onmouseleave = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;鼠标移动leave事件!&#x27;</span>);</span></span><br><span class="line">			&#125;	</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//mouseover \ mouseout 与 mouseenter / mouseleave 的区别: </span></span></span><br><span class="line"><span class="javascript">		<span class="comment">// (事件冒泡)mouseover \ mouseout 在其子元素上悬停和离开也会触发事件</span></span></span><br><span class="line"><span class="javascript">		<span class="comment">// (事件不冒泡) mouseenter / mouseleave 在其子元素上进入离开不会触发事件</span></span></span><br><span class="line"><span class="javascript">		<span class="comment">//事件冒泡现象:DOM元素触发事件的时候,会根据元素的嵌套关系,自底向上传递事件直至文档根部 </span></span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="键盘事件"><a href="#键盘事件" class="headerlink" title="键盘事件"></a>键盘事件</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;input&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    	<span class="keyword">var</span> input = <span class="built_in">document</span>.getElementById(<span class="string">&quot;input&quot;</span>);</span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//onkeydown 键盘按下事件</span></span></span><br><span class="line"><span class="javascript">		input.onkeydown = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//console.log(&#x27;键盘按下事件!&#x27;);</span></span></span><br><span class="line">			&#125;</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//onkeyup 键盘按键起来事件</span></span></span><br><span class="line"><span class="javascript">		input.onkeyup = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//console.log(&#x27;键盘按键起来事件!&#x27;);</span></span></span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line"><span class="javascript">		<span class="comment">//onkeypress 键盘按键产生可打印字符事件</span></span></span><br><span class="line"><span class="javascript">		input.onkeypress = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;这是一个字符键!&#x27;</span>);</span></span><br><span class="line">			&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="表单事件"><a href="#表单事件" class="headerlink" title="表单事件"></a>表单事件</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;#&quot;</span> <span class="attr">id</span>=<span class="string">&quot;form&quot;</span>&gt;</span></span><br><span class="line">    	账号<span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;abc&quot;</span> /&gt;</span></span><br><span class="line">           <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> /&gt;</span></span><br><span class="line">           <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;reset&quot;</span> /&gt;</span>	</span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    	<span class="keyword">var</span> abc = <span class="built_in">document</span>.getElementById(<span class="string">&quot;abc&quot;</span>);</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> form = <span class="built_in">document</span>.getElementById(<span class="string">&quot;form&quot;</span>);</span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//1.onfocus =&gt; 获得焦点事件</span></span></span><br><span class="line"><span class="javascript">		abc.onfocus = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//console.log(&#x27;这是焦点事件!&#x27;);</span></span></span><br><span class="line">			&#125; </span><br><span class="line">			</span><br><span class="line"><span class="javascript">		<span class="comment">//2.onblur =&gt; 失去焦点事件</span></span></span><br><span class="line"><span class="javascript">		abc.onblur = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//console.log(&#x27;这是失去焦点事件!&#x27;);</span></span></span><br><span class="line">			&#125; </span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//3.oninput =&gt; 输入内容事件</span></span></span><br><span class="line"><span class="javascript">		abc.oninput = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//console.log(&#x27;输入内容事件!&#x27;);</span></span></span><br><span class="line">			&#125; 	</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//4.onselect =&gt; 文本内容被选择事件</span></span></span><br><span class="line"><span class="javascript">		abc.onselect = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;文本内容被选择事件!&#x27;</span>);</span></span><br><span class="line">			&#125; </span><br><span class="line">			</span><br><span class="line"><span class="javascript">		<span class="comment">//5.onchange =&gt; 输入框内容改变(需要失去焦点) / 下拉列表/单选/复选框内容发生改变时触发				</span></span></span><br><span class="line"><span class="javascript">   		abc.onchange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;内容发生改变!&#x27;</span>);</span></span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//6.表单元素事件 - 表单提交事件 (伴随着默认的行为:页面跳转刷新)</span></span></span><br><span class="line"><span class="javascript">		form.onsubmit = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;表单正在提交....&#x27;</span>);</span></span><br><span class="line">			&#125;	</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//7.表单元素事件 - 表单重置事件	</span></span></span><br><span class="line"><span class="javascript">		form.onreset = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;表单重置事件!&#x27;</span>);</span></span><br><span class="line">			&#125;	</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="窗口事件"><a href="#窗口事件" class="headerlink" title="窗口事件"></a>窗口事件</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    	<span class="comment">//1.onload = &gt; 网页元素内容(图片等)加载完毕</span></span></span><br><span class="line"><span class="javascript">		<span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;网页内容加载完毕!&#x27;</span>);</span></span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line"><span class="javascript">		<span class="comment">//2.onresize = &gt;窗口大小改变事件</span></span></span><br><span class="line"><span class="javascript">		<span class="built_in">window</span>.onresize = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;窗口大小正在发生改变!&#x27;</span>);</span></span><br><span class="line">			&#125;	</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//3.onclose =&gt; 窗口关闭事件</span></span></span><br><span class="line"><span class="javascript">		<span class="built_in">window</span>.onclose = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			alert(<span class="string">&#x27;正在关闭窗口!&#x27;</span>);</span></span><br><span class="line">			&#125;	</span><br><span class="line">			</span><br><span class="line"><span class="javascript">		<span class="built_in">window</span>.onblur = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;窗口失去焦点事件&#x27;</span>);</span></span><br><span class="line">			&#125;;</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="built_in">window</span>.onfocus = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;窗口获得焦点事件&#x27;</span>);</span></span><br><span class="line">			&#125;;	</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//document 的 oncopy 事件 	</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="built_in">window</span>.oncontextmenu = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;正在触发右键菜单事件!&#x27;</span>);</span></span><br><span class="line">			&#125;	</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="其他事件"><a href="#其他事件" class="headerlink" title="其他事件"></a>其他事件</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>啊哈哈啊哈哈哈哈哈啊哈啊哈啊<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    	<span class="built_in">document</span>.oncopy = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			alert(<span class="string">&#x27;休想复制!!!!&#x27;</span>);</span></span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">			</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="默认右键菜单事件"><a href="#默认右键菜单事件" class="headerlink" title="默认右键菜单事件"></a>默认右键菜单事件</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">a</span> <span class="attr">id</span>=<span class="string">&quot;a&quot;</span> <span class="attr">href</span>=<span class="string">&quot;http://www.baidu.com&quot;</span>&gt;</span>百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>DOM元素中,有些远些特定功能,例如超链接点击会跳转,表单点击提交会跳转页面,右键会默认出来一个菜单 等等 都属于默认事件.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    	<span class="built_in">window</span>.oncontextmenu = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;正在调用右键菜单!&#x27;</span>);</span></span><br><span class="line"><span class="javascript">			<span class="comment">//阻止元素的默认行为 </span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line">			&#125;</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		a.onclick= <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line">			&#125;	</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h6 id="自定义右键菜单事件-先要禁掉右键默认菜单"><a href="#自定义右键菜单事件-先要禁掉右键默认菜单" class="headerlink" title="自定义右键菜单事件(先要禁掉右键默认菜单)"></a>自定义右键菜单事件(先要禁掉右键默认菜单)</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">	*&#123;</span><br><span class="line"><span class="css">		<span class="selector-tag">padding</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">margin</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line">	a&#123;</span><br><span class="line"><span class="css">		<span class="selector-tag">text-decoration</span><span class="selector-pseudo">:none</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">font-size</span><span class="selector-pseudo">:12px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">color</span>:<span class="selector-id">#666</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line">	ul,li&#123;</span><br><span class="line"><span class="css">		<span class="selector-tag">list-style</span><span class="selector-pseudo">:none</span>;</span></span><br><span class="line">		&#125;	</span><br><span class="line"><span class="css">	<span class="selector-id">#contextmenu</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">position</span><span class="selector-pseudo">:absolute</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">min-width</span><span class="selector-pseudo">:140px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">border</span><span class="selector-pseudo">:1px</span> <span class="selector-tag">solid</span> <span class="selector-id">#ccc</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">box-shadow</span><span class="selector-pseudo">:0</span> 0 3<span class="selector-tag">px</span> <span class="selector-id">#eee</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">display</span><span class="selector-pseudo">:none</span>;</span></span><br><span class="line">		&#125;	</span><br><span class="line">		</span><br><span class="line"><span class="css">	<span class="selector-id">#contextmenu</span> <span class="selector-tag">li</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">padding</span><span class="selector-pseudo">:0</span> 10<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">line-height</span><span class="selector-pseudo">:30px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">border-bottom</span><span class="selector-pseudo">:1px</span> <span class="selector-tag">dashed</span> <span class="selector-id">#ccc</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	<span class="selector-id">#contextmenu</span> <span class="selector-tag">li</span> <span class="selector-tag">a</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">display</span><span class="selector-pseudo">:block</span>;</span></span><br><span class="line">		&#125;	</span><br><span class="line"><span class="css">	<span class="selector-id">#contextmenu</span> <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">background-color</span>:<span class="selector-id">#f1f1f1</span>;</span></span><br><span class="line">		&#125;	</span><br><span class="line"><span class="css">	<span class="selector-id">#contextmenu</span> <span class="selector-tag">li</span><span class="selector-class">.noborder</span>&#123;</span></span><br><span class="line"><span class="css">			<span class="selector-tag">border</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line">			&#125;	</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;contextmenu&quot;</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        	<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">target</span>=<span class="string">&quot;_blank&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://lby.link&amp;title=%E8%BF%99%E6%98%AF%E5%88%86%E4%BA%AB%E7%9A%84%E6%BC%94%E7%A4%BA%E6%A1%88%E4%BE%8B&amp;summary=%E8%BF%99%E6%98%AF%E4%B8%80%E6%AE%B5%E6%91%98%E8%A6%81&quot;</span>&gt;</span>分享到QQ空间<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>分享到QQ好友<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>分享到朋友圈<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>分享到腾讯微博<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;noborder&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>分享到新浪微博<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">	<span class="comment">//分享的链接 https://blog.csdn.net/qq_37022150/article/details/82866171</span></span></span><br><span class="line">	</span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> contextmenu = <span class="built_in">document</span>.getElementById(<span class="string">&quot;contextmenu&quot;</span>);</span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> clientW = <span class="built_in">window</span>.innerWidth;<span class="comment">//窗口可视区域的宽度</span></span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> clientH = <span class="built_in">window</span>.innerHeight;</span></span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line"><span class="javascript">    	<span class="comment">//禁用系统默认的右键菜单</span></span></span><br><span class="line"><span class="javascript">		<span class="built_in">window</span>.oncontextmenu = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> mw = contextmenu.offsetWidth;<span class="comment">//获取菜单元素的宽度</span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> mh = contextmenu.offsetHeight;<span class="comment">//获取菜单元素的高度</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> e = e || <span class="built_in">window</span>.event;</span></span><br><span class="line">			</span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> x = e.clientX;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> y = e.clientY;</span></span><br><span class="line">			</span><br><span class="line"><span class="javascript">			<span class="comment">//console.log(x,y);</span></span></span><br><span class="line">			</span><br><span class="line"><span class="javascript">			contextmenu.style.display = <span class="string">&quot;block&quot;</span>;</span></span><br><span class="line">			</span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> mw = contextmenu.offsetWidth;<span class="comment">//获取菜单元素的宽度</span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> mh = contextmenu.offsetHeight;<span class="comment">//获取菜单元素的高度</span></span></span><br><span class="line">			</span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(mw,mh);</span></span><br><span class="line"><span class="javascript">			<span class="comment">//判断菜单是否会出界 </span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">if</span>(x &gt; clientW - mw)&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">&#x27;菜单会出界&#x27;</span>);</span></span><br><span class="line">				x = clientW - mw;</span><br><span class="line">				&#125;</span><br><span class="line">			</span><br><span class="line"><span class="javascript">			<span class="keyword">if</span>(y &gt; clientH - mh)&#123;</span></span><br><span class="line">				y = clientH - mh;</span><br><span class="line">				&#125;</span><br><span class="line"><span class="javascript">			contextmenu.style.left = x + <span class="string">&#x27;px&#x27;</span>;</span></span><br><span class="line"><span class="javascript">			contextmenu.style.top = y + <span class="string">&#x27;px&#x27;</span>;</span></span><br><span class="line">			</span><br><span class="line"><span class="javascript">			<span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line"><span class="javascript">		<span class="built_in">window</span>.onblur = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			contextmenu.style.display = <span class="string">&quot;none&quot;</span>;</span></span><br><span class="line">			&#125;	</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h6 id="事件对象Event"><a href="#事件对象Event" class="headerlink" title="事件对象Event"></a>事件对象Event</h6><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Transitional&#x2F;&#x2F;EN&quot; &quot;http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;xhtml1&#x2F;DTD&#x2F;xhtml1-transitional.dtd&quot;&gt;</span><br><span class="line">&lt;html xmlns&#x3D;&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv&#x3D;&quot;Content-Type&quot; content&#x3D;&quot;text&#x2F;html; charset&#x3D;utf-8&quot; &#x2F;&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;&#x2F;title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">	*&#123;</span><br><span class="line">		padding:0;</span><br><span class="line">		margin:0;</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">	.box&#123;</span><br><span class="line">		width:100%;</span><br><span class="line">		height:3000px;</span><br><span class="line">		background:linear-gradient(to bottom,red,green);&#125;	</span><br><span class="line">&lt;&#x2F;style&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;div class&#x3D;&quot;box&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	&#x2F;&#x2F;事件对象 Event : Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！</span><br><span class="line">		</span><br><span class="line">		&#x2F;* 事件对象 - 常用属性:</span><br><span class="line">			altKey: 判断触发事件时 是否按住了 alt 键</span><br><span class="line">			ctrlKey:</span><br><span class="line">			shiftKey:</span><br><span class="line">			which:标记鼠标(1左 2中 3右)或键盘的按键码(ascll码)</span><br><span class="line">			target:指向当前触发事件元素 </span><br><span class="line">			</span><br><span class="line">			</span><br><span class="line">			键盘:</span><br><span class="line">				code 键盘字符码</span><br><span class="line">				key 键盘字符</span><br><span class="line">				keyCode 键盘码 (ascll码)</span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		*&#x2F;</span><br><span class="line">    </span><br><span class="line">    	window.onkeydown &#x3D; function(e)&#123;</span><br><span class="line">			var e &#x3D; e || window.event; &#x2F;&#x2F;短路运算 ,用于解决低版本的IE不支持e的写法,需要使用window.event</span><br><span class="line">			</span><br><span class="line">			console.log(&#39;键盘按下!&#39;,e);</span><br><span class="line">			</span><br><span class="line">			&#125;</span><br><span class="line">	</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br><span class="line"> </span><br></pre></td></tr></table></figure>

<h6 id="事件对象Event-鼠标"><a href="#事件对象Event-鼠标" class="headerlink" title="事件对象Event-鼠标"></a>事件对象Event-鼠标</h6><p>Event对象代表事件的状态，比如事件在其中发生的元素，键盘按键的状态（键盘事件），鼠标的位置，鼠标按钮的状态（鼠标事件）。事件通常以与函数结合使用，函数不会在事件发生前被执行。（即事件发生后函数才会被执行，即为什么window.onload在窗口加载完成后才会执行完。）</p>
<p>示例代码：（一个鼠标按下事件,即鼠标按下事件发生后函数才会被执行）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">	*&#123;</span><br><span class="line">		padding:<span class="number">0</span>;</span><br><span class="line">		margin:<span class="number">0</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">	.box&#123;</span><br><span class="line">		width:<span class="number">100</span>%;</span><br><span class="line">		height:3000px;</span><br><span class="line">		background:linear-gradient(to bottom,red,green);&#125;	</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;box&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="comment">//事件对象 Event : Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">/* 事件对象 - 常用属性:</span></span><br><span class="line"><span class="comment">			altKey: 判断触发事件时 是否按住了 alt 键</span></span><br><span class="line"><span class="comment">			ctrlKey:</span></span><br><span class="line"><span class="comment">			shiftKey:</span></span><br><span class="line"><span class="comment">			which:标记鼠标(1左 2中 3右)或键盘的按键码(ascll码)</span></span><br><span class="line"><span class="comment">			target:指向当前触发事件元素 </span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			鼠标:</span></span><br><span class="line"><span class="comment">			button: 标识按下的鼠标按键: 0 左键 / 1 中键 / 2右键</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			clientX 触发事件时 ,鼠标相对于当前可视区域窗口坐标位置X的值</span></span><br><span class="line"><span class="comment">			clientY 触发事件时 ,鼠标相对于当前可视区域窗口坐标位置Y的值</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			offsetX 触发事件时 ,鼠标相对于当前触发事件元素的坐标位置的X值</span></span><br><span class="line"><span class="comment">			offsetY 触发事件时 ,鼠标相对于当前触发事件元素的坐标位置的Y值</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			pageX 触发事件时,鼠标相对于网页页面的坐标位置的X值</span></span><br><span class="line"><span class="comment">			pageY 触发事件时,鼠标相对于网页页面的坐标位置的Y值</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			screenX 触发事件时,鼠标相对于屏幕的坐标位置的X值</span></span><br><span class="line"><span class="comment">			screenY 触发事件时,鼠标相对于屏幕的坐标位置的Y值</span></span><br><span class="line"><span class="comment">			</span></span><br><span class="line"><span class="comment">			x: 与clientX 一样</span></span><br><span class="line"><span class="comment">			y: 与clientY 一样</span></span><br><span class="line"><span class="comment">		</span></span><br><span class="line"><span class="comment">		</span></span><br><span class="line"><span class="comment">		*/</span></span><br><span class="line">    </span><br><span class="line">    	<span class="built_in">window</span>.onmousedown = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">			<span class="keyword">var</span> e = e || <span class="built_in">window</span>.event; <span class="comment">//短路运算 ,用于解决低版本的IE不支持e的写法,需要使用window.event</span></span><br><span class="line">			</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;鼠标按下!&#x27;</span>,e);</span><br><span class="line">			</span><br><span class="line">			&#125;</span><br><span class="line">	</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h6><p>事件冒泡即在一个元素的子元素上添加事件对象被执行时，会将子元素上的事件冒泡到其父元素甚至到其祖先级元素上。</p>
<p>示例代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html xmlns=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;/title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">	#box1&#123;</span><br><span class="line">		width:800px;</span><br><span class="line">		height:800px;</span><br><span class="line">		background:#ccc;</span><br><span class="line">		margin:50px auto;</span><br><span class="line">		&#125;</span><br><span class="line">		#box2&#123;</span><br><span class="line">		width:600px;</span><br><span class="line">		height:600px;</span><br><span class="line">		background:red;</span><br><span class="line">		&#125;</span><br><span class="line">	#box3&#123;</span><br><span class="line">		width:400px;</span><br><span class="line">		height:400px;</span><br><span class="line">		background:green;</span><br><span class="line">		&#125;</span><br><span class="line">	#box4&#123;</span><br><span class="line">		width:200px;</span><br><span class="line">		height:200px;</span><br><span class="line">		background:blue;</span><br><span class="line">		&#125;		</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;div id=<span class="string">&quot;box1&quot;</span>&gt;box1</span><br><span class="line">    	&lt;div id=<span class="string">&quot;box2&quot;</span>&gt;box2</span><br><span class="line">        	&lt;div id=<span class="string">&quot;box3&quot;</span>&gt;box3</span><br><span class="line">            	&lt;div id=<span class="string">&quot;box4&quot;</span>&gt;</span><br><span class="line">               	 box4</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">		<span class="comment">//事件冒泡: 根据DOM嵌套关系将事件自底向上传递.</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//阻止事件冒泡 </span></span><br><span class="line">    	box1.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">			alert(<span class="string">&quot;box1单击事件!&quot;</span>);</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">		</span><br><span class="line">		box2.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">			alert(<span class="string">&quot;box2单击事件!&quot;</span>);</span><br><span class="line">			<span class="keyword">var</span> e = e || <span class="built_in">window</span>.event;</span><br><span class="line">			<span class="built_in">console</span>.log(e);</span><br><span class="line">			e.bubbles = <span class="literal">false</span>;</span><br><span class="line">			</span><br><span class="line">			<span class="comment">//e.stopPropagation(); //1.阻止事件冒泡</span></span><br><span class="line">			<span class="comment">//低版本IE / chrome 也可以</span></span><br><span class="line">			e.cancelBubble = <span class="literal">true</span>; <span class="comment">//2.阻止冒泡</span></span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">		box3.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">			alert(<span class="string">&quot;box3单击事件!&quot;</span>);</span><br><span class="line">			e.cancelBubble = <span class="literal">true</span>; <span class="comment">//2.阻止冒泡</span></span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">		box4.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">			alert(<span class="string">&quot;box4单击事件!&quot;</span>);</span><br><span class="line">			e.cancelBubble = <span class="literal">true</span>; <span class="comment">//2.阻止冒泡</span></span><br><span class="line">			&#125;			</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h6 id="事件捕获"><a href="#事件捕获" class="headerlink" title="事件捕获"></a>事件捕获</h6><p>事件捕获则相反，对一个元素添加事件对象时，该事件被执行时会将事件传到自己的子元素上甚至子元素的子元素…</p>
<p>事件捕获与事件冒泡的区别示例代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset=<span class="string">&quot;utf-8&quot;</span>&gt;</span><br><span class="line">&lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">div </span><br><span class="line">&#123;</span><br><span class="line">    background-color: coral;</span><br><span class="line">    border: 1px solid;</span><br><span class="line">    padding: 50px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;p&gt;该实例演示了在添加事件监听时冒泡与捕获阶段的不同。&lt;/p&gt;</span><br><span class="line">&lt;div id=<span class="string">&quot;myDiv&quot;</span>&gt;</span><br><span class="line">	&lt;p id=<span class="string">&quot;myP&quot;</span>&gt;点击该段落， 我是冒泡&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;&lt;br&gt;</span><br><span class="line">&lt;div id=<span class="string">&quot;myDiv2&quot;</span>&gt;</span><br><span class="line">	&lt;p id=<span class="string">&quot;myP2&quot;</span>&gt;点击该段落， 我是捕获&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">&quot;myP&quot;</span>).addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    alert(<span class="string">&quot;你点击了 P 元素!&quot;</span>);</span><br><span class="line">&#125;, <span class="literal">false</span>);</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">&quot;myDiv&quot;</span>).addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    alert(<span class="string">&quot;你点击了 DIV 元素!&quot;</span>);</span><br><span class="line">&#125;, <span class="literal">false</span>);</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">&quot;myP2&quot;</span>).addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    alert(<span class="string">&quot;你点击了 P 元素!&quot;</span>);</span><br><span class="line">&#125;, <span class="literal">true</span>);</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">&quot;myDiv2&quot;</span>).addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    alert(<span class="string">&quot;你点击了 DIV 元素!&quot;</span>);</span><br><span class="line">&#125;, <span class="literal">true</span>);</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<h6 id="offset坐标"><a href="#offset坐标" class="headerlink" title="offset坐标"></a>offset坐标</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">	*&#123;</span><br><span class="line"><span class="css">		<span class="selector-tag">padding</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">margin</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	<span class="selector-id">#box</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">width</span><span class="selector-pseudo">:400px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">height</span><span class="selector-pseudo">:400px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">background</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">margin</span><span class="selector-pseudo">:50px</span>;</span></span><br><span class="line">		&#125;	</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">    	</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;height:3000px;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    	box.onmousedown = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(e);</span></span><br><span class="line">			&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="如何给多个元素绑定事件-for循环"><a href="#如何给多个元素绑定事件-for循环" class="headerlink" title="如何给多个元素绑定事件(for循环)"></a>如何给多个元素绑定事件(for循环)</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;list1&quot;</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">li</span>&gt;</span>1这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>2这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>3这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>4这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>5这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>6这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>7这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>8这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;list2&quot;</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">li</span>&gt;</span>1这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>2这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>3这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>4这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>5这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>6这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>7这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>8这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line">	</span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> list1 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;list1&quot;</span>);</span></span><br><span class="line"><span class="javascript">    	<span class="keyword">var</span> lis = list1.getElementsByTagName(<span class="string">&quot;li&quot;</span>); <span class="comment">//集合</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;lis.length;i++)&#123;</span></span><br><span class="line"><span class="javascript">			lis[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="comment">//console.log(e.target);</span></span></span><br><span class="line"><span class="javascript">				<span class="comment">//alert(e.target.innerText);</span></span></span><br><span class="line">				</span><br><span class="line"><span class="javascript">				<span class="comment">//this = &gt; 指针 指向当前触发事件的元素</span></span></span><br><span class="line"><span class="javascript">				alert(<span class="built_in">this</span>.innerText);</span></span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="添加事件监听-addEventListener"><a href="#添加事件监听-addEventListener" class="headerlink" title="添加事件监听(addEventListener)"></a>添加事件监听(addEventListener)</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;addBtn&quot;</span>&gt;</span>新增一个li<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;list1&quot;</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">li</span>&gt;</span>1这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>2这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>3这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>4这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>5这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>6这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>7这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>8这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;list2&quot;</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">li</span>&gt;</span>1这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>2这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>3这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>4这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>5这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>6这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>7这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>8这是列表项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">		<span class="comment">//事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">		<span class="comment">//事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> list1 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;list1&quot;</span>);</span></span><br><span class="line"></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//addEventListener(事件类型,处理函数,是否为冒泡捕获阶段执行) 事件监听器 </span></span></span><br><span class="line"><span class="javascript">		list1.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//console.log(e.target); // = &gt;每次触发事件的 li</span></span></span><br><span class="line">			alert(e.target.innerText);</span><br><span class="line"><span class="javascript">			<span class="comment">//console.log(this); // = &gt; list1</span></span></span><br><span class="line">			&#125;);</span><br><span class="line">			</span><br><span class="line">			</span><br><span class="line"><span class="javascript">		<span class="comment">//新增li</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		addBtn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> li = <span class="built_in">document</span>.createElement(<span class="string">&#x27;li&#x27;</span>);</span></span><br><span class="line"><span class="javascript">				li.innerHTML = <span class="string">&#x27;这是后面追加的li&#x27;</span>;</span></span><br><span class="line">				list1.appendChild(li);</span><br><span class="line">			&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="DOM事件流"><a href="#DOM事件流" class="headerlink" title="DOM事件流"></a>DOM事件流</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	DOM 事件流触发过程  : 捕获阶段 - &gt; 目标阶段(当前元素) - &gt; 冒泡阶段 </span><br><span class="line">    </span><br><span class="line">    //DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。</span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="移除监听事件-removeEventListener"><a href="#移除监听事件-removeEventListener" class="headerlink" title="移除监听事件(removeEventListener)"></a>移除监听事件(removeEventListener)</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">	<span class="selector-id">#box</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">width</span><span class="selector-pseudo">:200px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">height</span><span class="selector-pseudo">:200px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">background-color</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span>&gt;</span>绑定事件<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">&quot;unbind()&quot;</span>&gt;</span>移除事件<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="keyword">function</span> <span class="title">clickEvent</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line">			alert(10);</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line"><span class="javascript">		<span class="function"><span class="keyword">function</span> <span class="title">clickEvent2</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line">			alert(100);</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line"><span class="javascript">		<span class="function"><span class="keyword">function</span> <span class="title">clickEvent3</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line">			alert(1000);</span><br><span class="line">			&#125;	</span><br><span class="line">			</span><br><span class="line"><span class="javascript">    	box.addEventListener(<span class="string">&#x27;click&#x27;</span>,clickEvent);</span></span><br><span class="line"><span class="javascript">		box.addEventListener(<span class="string">&#x27;click&#x27;</span>,clickEvent2);</span></span><br><span class="line"><span class="javascript">		box.addEventListener(<span class="string">&#x27;click&#x27;</span>,clickEvent3);</span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="comment">//移除</span></span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="keyword">function</span> <span class="title">unbind</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//box.removeEventListener(&#x27;click&#x27;,clickEvent3);</span></span></span><br><span class="line"><span class="javascript">			box.removeEventListener(<span class="string">&#x27;click&#x27;</span>,clickEvent3);</span></span><br><span class="line">		 &#125;</span><br><span class="line">		 </span><br><span class="line">		 </span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="低版本IE兼容的监听事件"><a href="#低版本IE兼容的监听事件" class="headerlink" title="低版本IE兼容的监听事件"></a>低版本IE兼容的监听事件</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;btn&quot;</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line">	/*	var addEventListener = null;</span><br><span class="line"><span class="javascript">    	<span class="keyword">if</span>(<span class="built_in">document</span>.addEventListener)&#123;</span></span><br><span class="line"><span class="javascript">				<span class="comment">//alert(&#x27;支持!&#x27;);</span></span></span><br><span class="line"><span class="javascript">				addEventListener = <span class="built_in">window</span>.addEventListener;</span></span><br><span class="line"><span class="javascript">			&#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="comment">//alert(&#x27;不支持!@&#x27;);</span></span></span><br><span class="line"><span class="javascript">				addEventListener = <span class="built_in">window</span>.attachEvent;		</span></span><br><span class="line">		&#125;</span><br><span class="line">		*/</span><br><span class="line"><span class="javascript">		<span class="comment">//btn.attachEvent()	</span></span></span><br><span class="line">		</span><br><span class="line">		/*if(window.attachEvent)&#123;</span><br><span class="line"><span class="javascript">			<span class="comment">//alert(&#x27;支持!&#x27;);</span></span></span><br><span class="line"><span class="javascript">			btn.attachEvent(<span class="string">&#x27;onclick&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line">				alert(123);</span><br><span class="line">				&#125;)</span><br><span class="line"><span class="javascript">			&#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//alert(&#x27;不支持!&#x27;);	</span></span></span><br><span class="line">			&#125;*/	</span><br><span class="line">			</span><br><span class="line"><span class="javascript">		<span class="function"><span class="keyword">function</span> <span class="title">bindEvent</span>(<span class="params">element,type,handler</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">if</span>(element.addEventListener)&#123;</span></span><br><span class="line">				element.addEventListener(type,handler);</span><br><span class="line"><span class="javascript">			  &#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="keyword">var</span> ev = <span class="string">&#x27;on&#x27;</span> + type;</span></span><br><span class="line">				element.attachEvent(ev,handler);	</span><br><span class="line">					&#125;</span><br><span class="line">			&#125;</span><br><span class="line">				</span><br><span class="line"><span class="javascript">		<span class="function"><span class="keyword">function</span> <span class="title">unbindEvent</span>(<span class="params">element,type,handler</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">if</span>(element.removeEventListener)&#123;</span></span><br><span class="line">				element.removeEventListener(type,handler);</span><br><span class="line"><span class="javascript">			  &#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="keyword">var</span> ev = <span class="string">&#x27;on&#x27;</span> + type;</span></span><br><span class="line">				element.dettachEvent(ev,handler);	</span><br><span class="line">					&#125;</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line"><span class="javascript">		bindEvent(btn,<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line">			alert(123);</span><br><span class="line">			&#125;)</span><br><span class="line">				</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="捕获与冒泡的区别-捕获就是事件由祖先级到后代-冒泡就是事件由后代到祖先级"><a href="#捕获与冒泡的区别-捕获就是事件由祖先级到后代-冒泡就是事件由后代到祖先级" class="headerlink" title="捕获与冒泡的区别(捕获就是事件由祖先级到后代,冒泡就是事件由后代到祖先级)"></a>捕获与冒泡的区别(捕获就是事件由祖先级到后代,冒泡就是事件由后代到祖先级)</h6><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;菜鸟教程(runoob.com)&lt;&#x2F;title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">div </span><br><span class="line">&#123;</span><br><span class="line">    background-color: coral;</span><br><span class="line">    border: 1px solid;</span><br><span class="line">    padding: 50px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;style&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;p&gt;该实例演示了在添加事件监听时冒泡与捕获阶段的不同。&lt;&#x2F;p&gt;</span><br><span class="line">&lt;div id&#x3D;&quot;myDiv&quot;&gt;</span><br><span class="line">	&lt;p id&#x3D;&quot;myP&quot;&gt;点击该段落， 我是冒泡&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;div&gt;&lt;br&gt;</span><br><span class="line">&lt;div id&#x3D;&quot;myDiv2&quot;&gt;</span><br><span class="line">	&lt;p id&#x3D;&quot;myP2&quot;&gt;点击该段落， 我是捕获&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">document.getElementById(&quot;myP&quot;).addEventListener(&quot;click&quot;, function() </span><br><span class="line">&#123;</span><br><span class="line">    alert(&quot;你点击了 P 元素!&quot;);</span><br><span class="line">&#125;, false);</span><br><span class="line">document.getElementById(&quot;myDiv&quot;).addEventListener(&quot;click&quot;, function()</span><br><span class="line">&#123;</span><br><span class="line">    alert(&quot;你点击了 DIV 元素!&quot;);</span><br><span class="line">&#125;, false);</span><br><span class="line">document.getElementById(&quot;myP2&quot;).addEventListener(&quot;click&quot;, function() </span><br><span class="line">&#123;</span><br><span class="line">    alert(&quot;你点击了 P 元素!&quot;);</span><br><span class="line">&#125;, true);</span><br><span class="line">document.getElementById(&quot;myDiv2&quot;).addEventListener(&quot;click&quot;, function() </span><br><span class="line">&#123;</span><br><span class="line">    alert(&quot;你点击了 DIV 元素!&quot;);</span><br><span class="line">&#125;, true);</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h6 id="js动画制作原理"><a href="#js动画制作原理" class="headerlink" title="js动画制作原理"></a>js动画制作原理</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">	<span class="selector-id">#box</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">position</span><span class="selector-pseudo">:absolute</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">left</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">width</span><span class="selector-pseudo">:100px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">height</span><span class="selector-pseudo">:100px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">background</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    	<span class="comment">//动画 : 从布局样式的A状态 ,设置一个时间,改变到B状态的过程.</span></span></span><br><span class="line"><span class="javascript">		<span class="comment">//在js实现动画的时代 ,只能用于一些css属性值为数字类型的属性才能制作动画   </span></span></span><br><span class="line">		 </span><br><span class="line"><span class="javascript">		 <span class="keyword">var</span> left = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">		 <span class="keyword">var</span> opacity = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">		 <span class="keyword">var</span> direction = <span class="literal">true</span>;</span></span><br><span class="line">		 </span><br><span class="line"><span class="javascript">		 <span class="keyword">var</span> timer =  <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line">			 left+=2;</span><br><span class="line">			 </span><br><span class="line"><span class="javascript">			 <span class="keyword">if</span>(direction)&#123;</span></span><br><span class="line">				 opacity+=0.01;</span><br><span class="line"><span class="javascript">				 <span class="keyword">if</span>(opacity&gt;=<span class="number">1</span>)direction=<span class="literal">false</span>;</span></span><br><span class="line"><span class="javascript">				 &#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line">				 opacity-=0.01;</span><br><span class="line"><span class="javascript">				 <span class="keyword">if</span>(opacity&lt;=<span class="number">0</span>)direction=<span class="literal">true</span>;	 </span></span><br><span class="line">				&#125;</span><br><span class="line">			 </span><br><span class="line">			 </span><br><span class="line"><span class="javascript">			 box.style.left = left + <span class="string">&#x27;px&#x27;</span>;</span></span><br><span class="line">			 box.style.opacity = opacity;</span><br><span class="line"><span class="javascript">			 <span class="keyword">if</span>(left &gt;=<span class="number">1000</span>)&#123;</span></span><br><span class="line"><span class="javascript">				 <span class="built_in">clearInterval</span>(timer);</span></span><br><span class="line">				 &#125;</span><br><span class="line">			 </span><br><span class="line">			 &#125;,1000 / 60);</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="案例-翻牌抽奖"><a href="#案例-翻牌抽奖" class="headerlink" title="案例-翻牌抽奖"></a>案例-翻牌抽奖</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">	<span class="selector-id">#container</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">width</span><span class="selector-pseudo">:1100px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">margin</span><span class="selector-pseudo">:50px</span> <span class="selector-tag">auto</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">overflow</span><span class="selector-pseudo">:hidden</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">border</span><span class="selector-pseudo">:1px</span> <span class="selector-tag">solid</span> <span class="selector-id">#f1f1f1</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	<span class="selector-class">.box</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">float</span><span class="selector-pseudo">:left</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">width</span><span class="selector-pseudo">:200px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">height</span><span class="selector-pseudo">:300px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">margin</span><span class="selector-pseudo">:50px</span> <span class="selector-tag">auto</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">transition</span><span class="selector-pseudo">:all</span> 0.35<span class="selector-tag">s</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">margin</span><span class="selector-pseudo">:10px</span> 5<span class="selector-tag">px</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	<span class="selector-class">.box</span><span class="selector-class">.open</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">transform</span><span class="selector-pseudo">:rotateY(180deg)</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	<span class="selector-class">.box</span> <span class="selector-tag">div</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">position</span><span class="selector-pseudo">:absolute</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">width</span><span class="selector-pseudo">:200px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">height</span><span class="selector-pseudo">:300px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">color</span>:<span class="selector-id">#fff</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">text-align</span><span class="selector-pseudo">:center</span>;</span></span><br><span class="line"></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	<span class="selector-class">.box</span> <span class="selector-class">.front</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">background</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">font-size</span><span class="selector-pseudo">:20px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">line-height</span><span class="selector-pseudo">:300px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">transform</span><span class="selector-pseudo">:rotateY(180deg)</span>;</span></span><br><span class="line"></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	<span class="selector-class">.box</span><span class="selector-class">.open</span> <span class="selector-class">.front</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">z-index</span><span class="selector-pseudo">:2</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	<span class="selector-class">.box</span><span class="selector-class">.open</span><span class="selector-class">.on</span> <span class="selector-class">.front</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">background-color</span><span class="selector-pseudo">:gold</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	<span class="selector-class">.box</span> <span class="selector-class">.back</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">background</span>:<span class="selector-id">#999</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">font-size</span><span class="selector-pseudo">:16px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">line-height</span><span class="selector-pseudo">:300px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">cursor</span><span class="selector-pseudo">:pointer</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">	<span class="selector-id">#container</span> <span class="selector-class">.box</span><span class="selector-class">.show</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">position</span><span class="selector-pseudo">:fixed</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">top</span><span class="selector-pseudo">:50</span>%;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">left</span><span class="selector-pseudo">:50</span>%;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">box-shadow</span><span class="selector-pseudo">:0</span> 0 10<span class="selector-tag">px</span> 2<span class="selector-tag">px</span> <span class="selector-id">#ccc</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">animation</span><span class="selector-pseudo">:animate</span> 1<span class="selector-tag">s</span> <span class="selector-tag">both</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">	<span class="keyword">@keyframes</span> animate &#123;</span></span><br><span class="line">		0%&#123;</span><br><span class="line"><span class="css">			<span class="selector-tag">left</span><span class="selector-pseudo">:50</span>%;</span></span><br><span class="line"><span class="css">			<span class="selector-tag">top</span><span class="selector-pseudo">:50</span>%;</span></span><br><span class="line"><span class="css">			<span class="selector-tag">transform</span><span class="selector-pseudo">:translate(-50</span>%,<span class="selector-tag">-50</span>%) <span class="selector-tag">scale</span>(0.3) <span class="selector-tag">rotateY</span>(180<span class="selector-tag">deg</span>);</span></span><br><span class="line">			&#125;</span><br><span class="line">		100%&#123;</span><br><span class="line"><span class="css">			<span class="selector-tag">left</span><span class="selector-pseudo">:50</span>%;</span></span><br><span class="line"><span class="css">			<span class="selector-tag">top</span><span class="selector-pseudo">:50</span>%;</span></span><br><span class="line"><span class="css">			<span class="selector-tag">transform</span><span class="selector-pseudo">:translate(-50</span>%,<span class="selector-tag">-50</span>%) <span class="selector-tag">scale</span>(2) <span class="selector-tag">rotateY</span>(180<span class="selector-tag">deg</span>);</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;container&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    		<span class="keyword">var</span> container = <span class="built_in">document</span>.getElementById(<span class="string">&quot;container&quot;</span>);</span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> goods = [<span class="string">&#x27;花呗还款&#x27;</span>,<span class="string">&#x27;iPhone X&#x27;</span>,<span class="string">&#x27;Mac Book Pro&#x27;</span>,<span class="string">&#x27;清空购物车&#x27;</span>,<span class="string">&#x27;100元充值卡&#x27;</span>];</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="comment">//生成一组 0 - 9  5个随机不重复的整数</span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> lucky = [];</span></span><br><span class="line"><span class="javascript">			<span class="keyword">while</span>(lucky.length&lt;<span class="number">5</span>)&#123;</span></span><br><span class="line"><span class="javascript">				<span class="keyword">var</span> num = <span class="built_in">parseInt</span>(<span class="built_in">Math</span>.random() * <span class="number">10</span>);</span></span><br><span class="line"><span class="javascript">				<span class="keyword">if</span>(lucky.indexOf(num) == -<span class="number">1</span>)&#123;</span></span><br><span class="line">					lucky.push(num);</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="comment">//生成卡牌</span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> htmlStr = <span class="string">&#x27;&#x27;</span>;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">10</span>;i++)&#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">				htmlStr+=&#x27;<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;front&quot;</span>&gt;</span>谢谢惠顾<span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;back&quot;</span>&gt;</span>点击翻开抽奖<span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>&#x27;;</span></span></span><br><span class="line">				&#125;</span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="comment">//插入到容器</span></span></span><br><span class="line">			container.innerHTML = htmlStr;</span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="comment">//获取所有的卡牌</span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> boxs = container.getElementsByClassName(<span class="string">&quot;box&quot;</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="comment">//根据已经生成的一组需要中奖的卡牌,放入对应的奖品</span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;lucky.length;i++)&#123;</span></span><br><span class="line">				boxs[lucky[i]].firstElementChild.innerHTML = goods[i];</span><br><span class="line">				&#125;</span><br><span class="line"></span><br><span class="line"><span class="javascript">			<span class="comment">//监听点击事件 = &gt; 翻牌</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">			container.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="keyword">var</span> e = e || <span class="built_in">window</span>.event;</span></span><br><span class="line"><span class="javascript">				<span class="comment">//console.log(e);</span></span></span><br><span class="line"><span class="javascript">				<span class="keyword">var</span> ele = e.target;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">				<span class="keyword">if</span>(ele.className == <span class="string">&#x27;back&#x27;</span>)&#123; <span class="comment">//只能点击背面 ,已经翻过的不能再翻</span></span></span><br><span class="line"><span class="javascript">					<span class="comment">//</span></span></span><br><span class="line"><span class="javascript">					<span class="built_in">console</span>.log(ele);</span></span><br><span class="line"><span class="javascript">					ele.parentNode.className= <span class="string">&quot;box open on&quot;</span>;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="javascript">					<span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">						<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;boxs.length;i++)&#123;</span></span><br><span class="line"><span class="javascript">							<span class="keyword">if</span>(boxs[i]!= ele.parentNode &amp;&amp; boxs[i]!=ele2)&#123;</span></span><br><span class="line"><span class="javascript">								<span class="built_in">console</span>.log(ele);</span></span><br><span class="line"><span class="javascript">								boxs[i].className=<span class="string">&quot;box open&quot;</span>;</span></span><br><span class="line">								&#125;</span><br><span class="line">							&#125;</span><br><span class="line"></span><br><span class="line"><span class="javascript">							<span class="comment">//克隆一个大的显示</span></span></span><br><span class="line"><span class="javascript">						<span class="keyword">var</span> ele2 = ele.parentNode.cloneNode(<span class="literal">true</span>);</span></span><br><span class="line"><span class="javascript">						ele2.className =<span class="string">&quot;box open on show&quot;</span>;</span></span><br><span class="line">						container.appendChild(ele2);</span><br><span class="line"></span><br><span class="line">						&#125;,350)</span><br><span class="line">				 &#125;</span><br><span class="line"></span><br><span class="line">				&#125;)</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="案例-挑战10s"><a href="#案例-挑战10s" class="headerlink" title="案例-挑战10s"></a>案例-挑战10s</h6><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Transitional&#x2F;&#x2F;EN&quot; &quot;http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;xhtml1&#x2F;DTD&#x2F;xhtml1-transitional.dtd&quot;&gt;</span><br><span class="line">&lt;html xmlns&#x3D;&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv&#x3D;&quot;Content-Type&quot; content&#x3D;&quot;text&#x2F;html; charset&#x3D;utf-8&quot; &#x2F;&gt;</span><br><span class="line">&lt;title&gt;无标题文档&lt;&#x2F;title&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">	.container&#123;</span><br><span class="line">		width:600px;</span><br><span class="line">		height:200px;</span><br><span class="line">		padding-top:50px;</span><br><span class="line">		border:1px solid #ccc;</span><br><span class="line">		margin:50px auto;</span><br><span class="line">		text-align:center;</span><br><span class="line">		&#125;</span><br><span class="line">&lt;&#x2F;style&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;div class&#x3D;&quot;container&quot;&gt;</span><br><span class="line">    	&lt;button id&#x3D;&quot;btn&quot;&gt;开始挑战&lt;&#x2F;button&gt;</span><br><span class="line">        &lt;div id&#x3D;&quot;time&quot;&gt;10.00&lt;&#x2F;div&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">    	var timeBox &#x3D; document.getElementById(&quot;time&quot;);</span><br><span class="line">		var btn &#x3D; document.getElementById(&quot;btn&quot;);</span><br><span class="line">		var timer,s,time&#x3D;0;</span><br><span class="line">		var flag &#x3D; false;</span><br><span class="line">		</span><br><span class="line">		btn.onmousedown &#x3D; function()&#123;</span><br><span class="line">			flag &#x3D; true;</span><br><span class="line">			time &#x3D; 0;</span><br><span class="line">			timer &#x3D; setInterval(function()&#123;</span><br><span class="line">				time++;</span><br><span class="line">				&#x2F;&#x2F;更新时间</span><br><span class="line">			    s &#x3D; (time &#x2F; 100).toFixed(2); </span><br><span class="line">				s &#x3D; s&lt;10?&#39;0&#39;+s:s;</span><br><span class="line">				timeBox.innerHTML &#x3D; s;</span><br><span class="line">				</span><br><span class="line">				&#125;,10);</span><br><span class="line">			&#125;</span><br><span class="line">		</span><br><span class="line">		document.onmouseup &#x3D; function()&#123;</span><br><span class="line">			if(flag)&#123;</span><br><span class="line">				clearInterval(timer);</span><br><span class="line">				flag &#x3D; false;</span><br><span class="line">			if(time &#x3D;&#x3D; 10 * 100)&#123;</span><br><span class="line">				alert(&#39;挑战成功!&#39;);</span><br><span class="line">				&#125;else&#123;</span><br><span class="line">				alert(&#39;挑战失败!&#39;);	</span><br><span class="line">				&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">		&#x2F;*btn.onmouseout &#x3D; function()&#123;</span><br><span class="line">			clearInterval(timer);</span><br><span class="line">			&#125;*&#x2F;		</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h6 id="案例-幸运大抽奖-转转转"><a href="#案例-幸运大抽奖-转转转" class="headerlink" title="案例-幸运大抽奖(转转转)"></a>案例-幸运大抽奖(转转转)</h6><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span> <span class="meta-keyword">PUBLIC</span> <span class="meta-string">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span class="meta-string">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;Content-Type&quot;</span> <span class="attr">content</span>=<span class="string">&quot;text/html; charset=utf-8&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>无标题文档<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">	*&#123;</span><br><span class="line"><span class="css">		<span class="selector-tag">padding</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">margin</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	<span class="selector-id">#container</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">width</span><span class="selector-pseudo">:600px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">height</span><span class="selector-pseudo">:600px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">margin</span><span class="selector-pseudo">:50px</span> <span class="selector-tag">auto</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">border</span><span class="selector-pseudo">:1px</span> <span class="selector-tag">solid</span> <span class="selector-id">#ccc</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	<span class="selector-id">#container</span> <span class="selector-tag">div</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">float</span><span class="selector-pseudo">:left</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">width</span><span class="selector-pseudo">:170px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">height</span><span class="selector-pseudo">:170px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">background-color</span>:<span class="selector-id">#F60</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">margin</span><span class="selector-pseudo">:6px</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">border</span><span class="selector-pseudo">:8px</span> <span class="selector-tag">solid</span> <span class="selector-tag">transparent</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">box-shadow</span><span class="selector-pseudo">:0</span> 0 5<span class="selector-tag">px</span> 1<span class="selector-tag">px</span> <span class="selector-id">#ccc</span>;</span></span><br><span class="line">		&#125;	</span><br><span class="line"><span class="css">	<span class="selector-id">#start</span>&#123;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">display</span><span class="selector-pseudo">:block</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">width</span><span class="selector-pseudo">:100</span>%;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">height</span><span class="selector-pseudo">:100</span>%;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">border</span><span class="selector-pseudo">:none</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">background-color</span>:<span class="selector-id">#f9f9f9</span>;</span></span><br><span class="line"><span class="css">		<span class="selector-tag">font-size</span><span class="selector-pseudo">:30px</span>;</span></span><br><span class="line">		&#125;</span><br><span class="line"><span class="css">	 <span class="selector-id">#container</span> <span class="selector-tag">div</span><span class="selector-class">.active</span>&#123;</span></span><br><span class="line"><span class="css">		 <span class="selector-tag">border-color</span><span class="selector-pseudo">:red</span>;</span></span><br><span class="line"><span class="css">		 <span class="selector-tag">box-shadow</span><span class="selector-pseudo">:0</span> 0 10<span class="selector-tag">px</span> 3<span class="selector-tag">px</span> <span class="selector-tag">gold</span>;</span></span><br><span class="line"><span class="css">		 <span class="selector-tag">background-color</span>:<span class="selector-id">#36C</span>;</span></span><br><span class="line">		 &#125;			</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;container&quot;</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">div</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>4<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;start&quot;</span>&gt;</span>开始抽奖<span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>6<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>7<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>8<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>9<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    	<span class="keyword">var</span> container = <span class="built_in">document</span>.getElementById(<span class="string">&quot;container&quot;</span>);</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> divs = container.getElementsByTagName(<span class="string">&quot;div&quot;</span>);<span class="comment">//获取9宫格的div</span></span></span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> order = [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">5</span>,<span class="number">8</span>,<span class="number">7</span>,<span class="number">6</span>,<span class="number">3</span>];<span class="comment">//顺序索引值 = &gt; div的索引位置</span></span></span><br><span class="line"><span class="javascript">		<span class="comment">/*order = order.sort(function(a,b)&#123;</span></span></span><br><span class="line"><span class="javascript">			<span class="keyword">return</span> <span class="built_in">Math</span>.random() - <span class="number">0.5</span>;</span></span><br><span class="line">			&#125;)*/</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> index = <span class="number">0</span>;<span class="comment">//当前所在的位置 =&gt; 转动的索引位置</span></span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> timer,randomNum;</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> speed = <span class="number">50</span>;</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> count = <span class="number">0</span>;<span class="comment">//记录转动的次数</span></span></span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		start.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line">			count=0;</span><br><span class="line">			index=0;</span><br><span class="line">			speed=50;</span><br><span class="line"><span class="javascript">			start.innerHTML = <span class="string">&#x27;抽奖中...&#x27;</span>;</span></span><br><span class="line"><span class="javascript">			<span class="comment">//设定 ,抽奖的停止 必须转满 3圈 , 可以在接下来的两圈内,随机停下 </span></span></span><br><span class="line"><span class="javascript">			randomNum = <span class="number">46</span> + <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="number">7</span>);</span></span><br><span class="line"><span class="javascript">			 <span class="built_in">console</span>.log(randomNum);</span></span><br><span class="line"><span class="javascript">			 start.disabled = <span class="literal">true</span>;</span></span><br><span class="line">			 </span><br><span class="line"><span class="javascript">			change();<span class="comment">//				</span></span></span><br><span class="line">			&#125;</span><br><span class="line">		</span><br><span class="line"><span class="javascript">		<span class="function"><span class="keyword">function</span> <span class="title">change</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line">			   count++;</span><br><span class="line">				</span><br><span class="line"><span class="javascript">				<span class="comment">//清除所有的样式	</span></span></span><br><span class="line"><span class="javascript">				<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;order.length;i++)&#123;</span></span><br><span class="line"><span class="javascript">					 divs[order[i]].className=<span class="string">&quot;&quot;</span>;</span></span><br><span class="line">					&#125;</span><br><span class="line"><span class="javascript">				<span class="comment">//设置当前位置的样式	</span></span></span><br><span class="line"><span class="javascript">				divs[order[index]].className =<span class="string">&quot;active&quot;</span>;</span></span><br><span class="line">				index++;</span><br><span class="line"><span class="javascript">				<span class="keyword">if</span>(index&gt;=order.length)index=<span class="number">0</span>;</span></span><br><span class="line">				</span><br><span class="line"><span class="javascript">				<span class="keyword">if</span>(randomNum - count &lt;<span class="number">10</span>)&#123;</span></span><br><span class="line">					speed+=20;</span><br><span class="line">					&#125;</span><br><span class="line">				</span><br><span class="line"><span class="javascript">				<span class="keyword">if</span>(count&lt;randomNum)&#123;</span></span><br><span class="line"><span class="javascript">					<span class="built_in">setTimeout</span>(change,speed);</span></span><br><span class="line"><span class="javascript">				 &#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">					start.disabled = <span class="literal">false</span>;</span></span><br><span class="line"><span class="javascript">					start.innerHTML =<span class="string">&#x27;开始抽奖&#x27;</span>; </span></span><br><span class="line">					 &#125;</span><br><span class="line">					</span><br><span class="line">			&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h3 id="严格模式"><a href="#严格模式" class="headerlink" title="严格模式:"></a>严格模式:</h3><blockquote>
<p>在ES5版本及以前JavaScript语法非常随意, 容易导致一些项目维护和拍错非常困难.使用严格模式(下一代JS) 规避一些没有必要的异常奇葩问题.</p>
<p>消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;<br>消除代码运行的一些不安全之处，保证代码运行的安全；<br>提高编译器效率，增加运行速度；<br>为未来新版本的Javascript做好铺垫。</p>
<p>在代码块首行使用 : “use strict” ;  声明严格模式  , 也可以在函数内部首行声明     </p>
</blockquote>
<blockquote>
<p>罗列 各项严格模式规则…</p>
</blockquote>

      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://xulujin.gitee.io/blog/2018/10/22/javascript%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80/" title="javascript编程基础" target="_blank" rel="external">https://xulujin.gitee.io/blog/2018/10/22/javascript%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://github.com/1314xulujin" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/blog/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://github.com/1314xulujin" target="_blank"><span class="text-dark">LuKing-Xun</span><small class="ml-1x">前端工程师</small></a></h3>
        <div>邮箱:luking-xun@qq.com 微信:Element-UI</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	

    
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/blog/2018/10/22/Photoshop%E8%BD%AF%E4%BB%B6%E4%BD%BF%E7%94%A8%E5%9F%BA%E7%A1%80/" title="Photoshop软件使用基础"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;Newer</span></a>
    </li>
    
    
    <li class="next">
      <a href="/blog/2018/10/22/HTML%E7%BD%91%E9%A1%B5%E5%9F%BA%E7%A1%80/" title="HTML网页基础"><span>Older&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal"><span>$</span></button>
  <!-- <div class="wave-icon wave-icon-danger btn-donate" data-toggle="modal" data-target="#donateModal">
    <div class="wave-circle"><span class="icon"><i class="icon icon-bill"></i></span></div>
  </div> -->
  
  
  <div class="bar-right">
    
    <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone"></div>
    
  </div>
  </div>
</nav>
  
<!-- Modal -->
<div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content donate">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-body">
        <div class="donate-box">
          <div class="donate-head">
            <p>Maybe you could buy me a cup of coffee.</p>
          </div>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade active in" id="alipay">
              <div class="donate-payimg">
                <img src="/blog/images/donate/alipay.jpg" alt="Scan Qrcode" title="Scan" />
              </div>
              <p class="text-muted mv">Scan this qrcode</p>
              <p class="text-grey">Open alipay app scan this qrcode, buy me a coffee!</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="wechatpay">
              <div class="donate-payimg">
                <img src="/blog/images/donate/wechatpay.jpg" alt="Scan Qrcode" title="Scan" />
              </div>
              <p class="text-muted mv">Scan this qrcode</p>
              <p class="text-grey">Open wechat app scan this qrcode, buy me a coffee!</p>
            </div>
          </div>
          <div class="donate-footer">
            <ul class="nav nav-tabs nav-justified" role="tablist">
              <li role="presentation" class="active">
                <a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true"><i class="icon icon-alipay"></i> alipay</a>
              </li>
              <li role="presentation" class="">
                <a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false"><i class="icon icon-wepay"></i> wechat payment</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/1314xulujin" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://mail.qq.com/cgi-bin/loginpage" target="_blank" title="Email" data-toggle=tooltip data-placement=top><i class="icon icon-email"></i></a></li>
        
        <li><a href="/blog/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        <div class="publishby">
        	<!-- Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>. -->
            更多功能正在开发中...
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/blog/js/plugin.min.js"></script>


<script src="/blog/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: 'Posts',
            PAGES: 'Pages',
            CATEGORIES: 'Categories',
            TAGS: 'Tags',
            UNTITLED: '(Untitled)',
        },
        ROOT_URL: '/blog/',
        CONTENT_URL: '/blog/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/blog/js/insight.js"></script>






   




   
    
<script src="//cdn.jsdelivr.net/npm/gitment@0.0.3/dist/gitment.browser.min.js"></script>
<script>
var gitment = new Gitment({
  // id默认为当前页面url，如果url后带参数或锚点，gitment要重新初始化
  // https://github.com/imsun/gitment/issues/55
  // 解决方案：id:window.location.pathname,或者将id设置为当前页面标题
  id: 'javascript编程基础', 
  owner: '1314xulujin', // 可以是你的GitHub用户名，也可以是github id
  repo: '1314xulujin.github.io',
  oauth: {
    client_id: 'f5572d863183b5e79cf9',
    client_secret: '8754b0d4afae1b366e75b4058a4b83a66ed82f05',
  }
})
gitment.render('comments')
</script>









</body>
</html>